绑定事件的方式和特点

使用Element.onclick = function (e){}
优点:
在IE和其他浏览器上均兼容,并且函数内this绑定到当前DOM元素中。
缺点:
在DOM元素上一次只能绑定一个事件处理器,无法实现多Handler绑定。
function中event参数只对非IE浏览器有效(IE有window.event)
只支持Bubbling,不支持Capturing。

使用W3C标准的事件
Element.addEventListener()和removeEventListener()
addEventListener带有三个参数(event,function,boolean)event不含on,boolean表示是否支持Capturing
优点:
可以支持Bubbling和Capturing
可以在一个元素上绑定多个事件处理器
function中的第一个参数,无论是否显示调用,永远都是event对象的引用
缺点:
不支持IE

使用IE事件
window.attachEvent()和detachEvent()
attachEvent的两个参数,分别是event含on,
优点:
在同一个DOM元素能绑定多个事件处理函数
缺点:
只支持Bubbling,不支持Capturing。
函数内部的this无法正确获取,只能得到window object全局对象,如果需要event对象则需要使用window.event方式
仅支持IE浏览器


阻止默认行为:

e.preventDefault()
window.event.returnValue = false;

阻止冒泡事件

e.stopPropagation()
window.event.cancleBubble = true
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,169评论 1 10
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,242评论 1 6
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,274评论 0 1
  • 什么是事件: 我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠...
    张松1366阅读 7,004评论 1 6
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,333评论 3 11

友情链接更多精彩内容