事件绑定就是通过给一个对象添加一个事件,在该事件发生后,执行一个函数
事件绑定方法:
-
在DOM元素中直接绑定
详情请戳事件绑定-DOM元素中直接绑定
-
在JavaScript代码中通过on来进行绑定
详情请戳事件绑定-on
-
在JavaScript代码中通过addEventListener()方法来进行绑定
-
在JavaScript代码中通过attachEvent()方法来进行绑定(IE8以下兼容性问题的解决方案)
IE的方法,其他浏览器均不支持:)
总结
在不考虑兼容性的情况下:
- 在DOM元素中直接写事件绑定不利于代码的维护和修改,而且会在html骨架中添加很多冗余的东西,这里不考虑使用
- on和addEventListener()方法比较:
- 两者中的this均指向当前对象
- 两者的事件处理函数都可以为匿名函数或者命名函数
on在这里没有什么限制
addEventListener()方法中使用命名函数更为整洁,而且有利于事件绑定的移除 - 如果要对事件添加多个事件处理函数
on只能添加一个,如果有多个,后面的会覆盖前面的
addEventListener()方法则没有限制 - 事件处理函数的执行时机
on只能在事件冒泡时执行事件处理函数
addEventListener()方法可以通过第三个参数-布尔值来控制事件处理函数的执行时机
在考虑兼容性问题(IE8以下)的情况下:
- on在使用时需要注意事件处理函数圆括号内的事件对象参数的调用方法,在IE中event是自带的事件对象
- addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,但是并不支持IE8以下
- 利用框架里面写好的兼容性函数,或者使用attachEvent()方法
- 让IE被W3C的大车轮碾压致死吧 :-)
网友评论