js dom 事件委托(事件冒泡机制的使用)

参考视频:https://www.bilibili.com/video/BV1vt411Q7SE?from=search&seid=4135034233922091596

https://www.bilibili.com/video/BV1yi4y1F79t?from=search&seid=4135034233922091596

参考博客:https://www.cnblogs.com/leftJS/p/10948138.html

事件:元素天生自带的行为。

事件机制设计的原则:绑定在父元素的事件,用户在子元素也可以触发。

事件委托的作用?

1 绑定事件越多,浏览器内存占用越大,严重影响性能。 批量添加 监听,消耗性能太大。

2 ajax出现,局部刷新盛行,导致每次加载 ,都要重新绑定事件。

3 部分浏览器移除元素,绑定的事件没有被及时清楚,导致内存蟹柳,影响性能。

4 耦合性过大,影响后期维护。

使用时间委托可以解决上述4个痛点:

  1 每次捕捉 到事件的时候,获得一个event对象,这个对象有一个 target属性, 本次我们产生交互的具体目标。

target目标。 p, ul,

appendChild(oli).

动态绑定问题: 大量的处理函数 也会产生大量消耗内存。

事件委托:

  利用 事件冒泡机制,将后代

  结合 e.target属性。 真正点击的元素。

    e.currentTarget;事件绑定的对象 绑定在谁身上就是谁。

e.target.style.color= ‘red' 子节点都是冒泡的

事件委托使用场景:

  当有大量元素需要批量添加事件监听的时候,可以使用事件委托 ,减少内存开销。

  即使有新元素创建,事件委托也可以让新上树具有事件监听。

使用事件委托需要注意的是将:

  onmouseenter不冒泡。 onmouseover冒泡。

使用事件委托,不呢个委托不冒泡的 给祖先元素!!!

原文地址:https://www.cnblogs.com/hacker-caomei/p/14422746.html