DOM事件高级③(阻止事件冒泡、事件委托)

DOM事件高级③(阻止事件冒泡、事件委托)

文章目录

​​阻止事件冒泡​​

​​阻止事件冒泡的两种方式​​​​阻止事件冒泡的兼容性解决方案​​

​​事件委托（代理、委派）​​

阻止事件冒泡

阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡 标准写法：利用事件对象里面的 stopPropagation()方法

e.stopPropagation()

非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

e.cancelBubble = true;

例如：

阻止事件冒泡的兼容性解决方案

if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; }

事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景： 一个班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

解决方案： 快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

优势： 快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任

• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手
• 知否知否，应该有弹框在手

事件委托 事件委托也称为事件代理， 在 jQuery 里面称为事件委派。

事件委托的原理 不是每个子节点单独设置事件-，而是事件-设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。