2.事件绑定

事件绑定就是通过给一个对象添加一个事件,在该事件发生后,执行一个函数

事件绑定方法:

  • 在DOM元素中直接绑定

详情请戳事件绑定-DOM元素中直接绑定

  • 在JavaScript代码中通过on来进行绑定

详情请戳事件绑定-on

  • 在JavaScript代码中通过addEventListener()方法来进行绑定

详情请戳事件绑定-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的大车轮碾压致死吧 :-)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 11,931评论 1 6
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,022评论 3 11
  • 什么是事件: 我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠...
    张松1366阅读 11,766评论 1 6
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,159评论 1 10
  • 寂寞流泪,身如浮萍,断了根,若有水相邀,我也会同行。——小野小町 我捧着一碗诗却无从下咽想饮下这清流而它早已遁入天...
    benX阅读 4,944评论 0 2