事件冒泡和事件委托 案例

目录

        1.事件冒泡

        2.事件委托

1.事件冒泡

事件冒泡是指当一个元素被触发某个事件（如点击）时，这个事件会从最深的节点（或目标节点）开始，然后逐级向上传播到较少特定的节点，直到文档的根节点。

案例：方案1 和方案2 大模块可选中，前面的复选框也可选中，勾选复选框不影响块选中

代码如上，如果不加 .native.stop的话，当选中复选框时，也会同时触发changeItem这个方法，导致选中的块发生变化， 加上.native.stop，勾选复选框不会触发changeItem事件。

2.事件委托

‌事件委托的原理是利用事件冒泡机制。

案例：页面渲染了20个小方块，当点击某个小方块时，随机给小方块加上背景色

我们在 父节点(或者更高节点)身上添加方法，当子元素触发事件时，会冒泡到父节点，父节点上的事件处理函数就会触发，通过这种方式，可以避免为每个子元素单独绑定事件处理函数，从而节省内存，提高性能。

效果图如下：

 更多详细内容：事件冒泡 - 学习 Web 开发 | MDN