事件冒泡和事件捕获的执行顺序

之前看到过很多文章，文章都统一的说事件捕获执行在前，冒泡执行在后，实际上这是不严谨的，今天刚好有时间我们来捋一捋，直接举例子

  <div id="div1">
        我是div1
        <div id="div2">我是div2
            <div id="div3">
                我是div3
                <div id="div4">我是div4</div>
            </div>
        </div>
    </div>

首先我们写了4个div他是一个嵌套的关系，我给他们设置了不同的大小和背景颜色，页面展示效果如下

接下来我们要去给这个四个元素分别绑定冒泡和捕获，这个时候就需要用到addEventListener（）,这个方法他需要传递三个参数

第一个参数：要执行的事件名字，注意不能带on，比如应该写click而不是onclick

第二个参数：触发事件后执行的事件处理函数

第三个参数：执行捕获还是冒泡。false是冒泡，也是默认值，true是捕获

 //冒泡
        oDiv1.addEventListener('click', function () {
            console.log("我是div1");
        });
        oDiv2.addEventListener('click', function () {
            console.log("我是div2");
        });
        oDiv3.addEventListener('click', function () {
            console.log("我是div3");
        });
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });
        //捕获
        oDiv1.addEventListener('click', function () {
            console.log("我是div1-1");
        }, true);
        oDiv2.addEventListener('click', function () {
            console.log("我是div2-2");
        }, true);
        oDiv3.addEventListener('click', function () {
            console.log("我是div3-3");
        }, true);
        oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);

我们绑定好参数之后执行，执行结果如下

我点击的是div4，通过下面的结果可以看到，对于1-3来说，确实先执行的是捕获，在执行冒泡，但是对于我们div4，他先输出的是冒泡，再是捕获，那么我们这个时候，修改一下，只将div4的捕获事件写在div4冒泡事件之前

//就是把div4的捕获写在前面
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4-4");
        }, true);
 oDiv4.addEventListener('click', function (e) {
            console.log("我是div4");
        });

执行结果如下

那么演示到这里其实就非常的明了了，对于嵌套内元素来说，捕获先执行，再执行冒泡

但是对于触发的元素来说（此处指的是div4），捕获和冒泡的执行顺序取决于代码的书写顺序，谁在前面执行谁

这样大家能更清楚捕获和冒泡的执行顺序啦嘛～fighting

事件冒泡和事件捕获的执行顺序

猜你喜欢