JS-阻止冒泡事件与事件委托

作者: 肖青荣 | 来源:发表于2020-10-23 16:52 被阅读0次

js 元素事件行为
JS-阻止冒泡事件与事件委托
事件委托、事件冒泡
事件委托与事件冒泡
6-jQuery事件操作
微信小程序中bind和catch的区别
事件委托on()里面阻止事件冒泡
事件委托
原始类型与事情委托
事件委托、阻止默认动作、阻止事件冒泡

1.什么是事件冒泡？

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

通俗来说，我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

image.png

2.阻止事件冒泡

1.标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
2.非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

3.事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派。不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
如：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器，这里只操作了一次 DOM ，提高了程序的性能。

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('点我应有弹框！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>