JQuery中的event

今天尝试仿写个js的demo，其中的一段代码 $("#i").keydown(function(e) {}，很明显这是在给一个id=i的元素添加keydown事件，但是里面的匿名函数中却有了个e参数，对此我查了些资料，总结如下：

首先，function(e){}中的e表示当前文档触发的DOM事件，所谓DOM事件是由W3C定义好的，包括：鼠标事件、框架事件、键盘、表单事件等等。而JQuery中的e就是把js中的Event做了封装，实现多浏览器兼容。说到兼容也不得不提IE和FF。

因为这两种浏览器对于事件对象的定义有些不同，在IE中event是绑定在window当中的，而ff则是把它作为句柄的第一个参数传入arguements[0](这是啥不理解看看我对“Function和function的总结”)，所以为了更好的兼容可将代码写为

这样就解决了IE和FF对于事件的兼容性了。

知道事件是怎么被传入了，那么事件是如何被添加呢？

1.在html中写js代码

<div onclick="alert(“window.enent.type”);">hahaha</div>

当然这段代码在IE中可以运行，但在ff中就要报错TypeError: window.event is undefined。

但如果将代码改为

<div onclick="alert(“arguments[0].type”);">hahaha</div>

那么在IE9和ff中都可以正常显示“click”，为什么？

对于ff都知道event可以做方法的第一个参数传入，自然可以正常运行；在IE9中做了优化，也满足了event作为第一个参数传入的机制，所以IE9是可以的，但是对于IE6/IE7/IE8确是不可以的。

其实onclick="alert(arguments[0].type);  等价于function onclick(event){ alert(arguments[0].type);}

通过实验，现在主流浏览器Firefox/Opera/Safari/Chrome/IE9都满足event作为参数传入的机制

2.给html元素事件属性赋予方法

<script type="text/javascript">  
     function cal(){
  alert(event);
}  
</script>  
<div onclick="cal()">hahaha</div>

我们已经知道onclick其实可以等价写为(除了IE6/IE7/IE8)

funciton onclick(event) {
  cal();
}

只有ff会报event is not defined的错误，对于其他浏览器Opera/Safari/Chrome他们可以兼容IE的window.event，所以不会报错，但是从代码中看ff已经把event作为参数传入了，怎么还会报错呢，可能是由于onclick和cal中的event不同吧！如果改写为

<script type="text/javascript">  
    function cal(e){alert(e);}  
</script>  
<div onclick="cal(arguments[0])">hahaha</div> 

就可以了

3.使用element.onXxx

这种做法将js代码和html彻底分开，例如

<div id="div">hahaha</div>  
<script type="text/javascript">    
    var div = document.getElementById('div');  
    d3.onclick = function(){    }  
</script>  

这里要注意如果把js代码写到div标签的上方，就会报错，想想为啥！

4.使用addEventListener或IE专有的attachEvent

obj.addEventListener("click",function(){
alert("hello world");
})，false);

obj.attachEvent('onclick',clk); 

addEventListener第一个参数是事件名称，第二个是方法体也可以写方法名称，第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。