今天尝试仿写个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 οnclick="alert(“window.enent.type”);">hahaha</div>
当然这段代码在IE中可以运行,但在ff中就要报错
但如果将代码改为
<div οnclick="alert(“arguments[0].type”);">hahaha</div>
那么在IE9和ff中都可以正常显示“click”,为什么?
对于ff都知道event可以做方法的第一个参数传入,自然可以正常运行;在IE9中做了优化,也满足了event作为第一个参数传入的机制,所以IE9是可以的,但是对于IE6/IE7/IE8确是不可以的。
其实οnclick="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 οnclick="cal()">hahaha</div>
我们已经知道onclick其实可以等价写为(除了IE6/IE7/IE8)
funciton onclick(event) {
cal();
}
只有ff会报
<script type="text/javascript">
function cal(e){alert(e);}
</script>
<div οnclick="cal(arguments[0])">hahaha</div>
就可以了
<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方式(由外向里)。