Js中DOM事件绑定分析

原创 年树先生 随笔 前端技术 10022阅读 2018-12-19 21:34:00 举报

在这篇文章中小编给大家整理了关于JS中DOM事件绑定的相关知识点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

Js事件绑定

JavaScript 有三种事件模型:

内联模型
脚本模型
DOM2 模型

1、内联模型

2、脚本模型

3、内联模型

“DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:
addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数;事件名、函数、冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡)

PS: IE 实现了与 DOM 中类似的两个方法:attachEvent()和 detachEvent()。这两个方法接受
相同的参数:事件名称和函数。
在使用这两组函数的时候,先把区别说一下:

    1. IE 不支持捕获,只支持冒泡;
    1. IE 添加事件不能屏蔽重复的函数;
    1. IE 中的 this 指向的是 window 而不是 DOM 对象。
    1. 在传统事件上,IE 是无法接受到 event 对象的,但使用了 attchEvent()却可以,但有些区别。

PS:IE 中的事件绑定函数 attachEvent()和 detachEvent()可能在实践中不去使用,有几个原因:
1.IE9 就将全面支持 W3C 中的事件绑定函数;
2.IE 的事件绑定函数无法传递 this;
3.IE的事件绑定函数不支持捕获;
4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏的问题

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复