事件冒泡和事件捕获到底有何区别？

2019-02-16 本文已影响0人 YYanm

$\color{red}{1. 事件冒泡原理}$

冒泡两字会让我联想想起泡泡，泡泡是往上飞的对吧？
或者像水中鱼儿吐泡泡一样，那个泡泡从产生的起点往上浮。

事件冒泡原理也是相同的，从下至上。

Honeycam 2019-02-16 22-09-37.gif

假设我要点击的是div，点击后会一层一层的往上。

$\color{red}{来个小案例}$

<div class="classv">
        我是祖宗
        <div class="actva">我是老爸
            <div class="foo">我是孩子</div>
        </div>

    </div>
    <script type="text/javascript">
        var a = document.querySelector('.classv').addEventListener('click', function() {
            console.log('我是祖宗')
        }, false)
        var b = document.querySelector('.actva').addEventListener('click', function() {
            console.log('我是老爸')
        }, false)
        var c = document.querySelector('.foo').addEventListener('click', function() {
            console.log('我是孩子')
        }, false)
    </script>

注意： addEventListener中有三个属性，第三个属性是布尔值。

$\color{red}{默认属性是 false为事件冒泡，true 为事件捕获}$

Honeycam 2019-02-16 22-38-36.gif

图中点击我是孩子，孩子后面会出现老爸和祖宗。点击老爸，后面会出现我是祖宗。

$\color{red}{2. 事件捕获}$
事件捕获与事件冒泡完全相反。是从上至下到指定元素。

Honeycam 2019-02-16 22-48-38.gif

来个小案例

<div class="classv">
        我是祖宗
        <div class="actva">我是老大
            <div class="foo">我是老幺</div>
        </div>

    </div>
    <script type="text/javascript">
        var a = document.querySelector('.classv').addEventListener('click', function() {
            console.log('我是祖宗')
        }, true)
        var b = document.querySelector('.actva').addEventListener('click', function() {
            console.log('我是老大')
        }, true)
        var c = document.querySelector('.foo').addEventListener('click', function() {
            console.log('我是老幺')
        }, true)
    </script>

这个案例与前面的是相同，只是把addEventListener的第三属性改成true。

Honeycam 2019-02-16 22-36-02.gif

点击我是孩子，首先出现祖宗、老爸最后出现目标元素。点击我是老爸首先出现祖宗。

注意：addEventListener()必须用removeEventListener()解除

$\color{red}{ 如果感觉半知半解的建议可以去动手操作，这样心里记得牢}$

-------以上如有错误的地方希望大神们可以指出，感谢！