JavaScript捕获和冒泡探讨

 <div id="div">
     <input type="button" value="banana" id="banana" />
</div> 

在此页面中我们添加如下的代码:

var btn = document.getElementById('banana');
        var div = document.getElementById('div');

        btn.addEventListener('click', function () {
            console.log('capture', 'btn');
        }, true);
        btn.addEventListener('click', function () {
            console.log('bubble', 'btn');
        }, false);
       
        div.addEventListener('click', function () {
            console.log('capture', 'div');
        }, true);
        div.addEventListener('click', function () {
            console.log('bubble', 'div');
        }, false);

给button和div我们都是先绑定的捕获事件，此时运行的结果如下:

capture div
capture btn
bubble btn
bubble div

可以看出是先运行的 捕获div - > 捕获 btn - > 冒泡 btn -> 冒泡 div.

我们改改事件绑定的先后顺序,代码如下:

var btn = document.getElementById('banana');
        var div = document.getElementById('div');
     
        btn.addEventListener('click', function () {
            console.log('bubble', 'btn');
        }, false);
        btn.addEventListener('click', function () {
            console.log('capture', 'btn');
        }, true);
       
       
        div.addEventListener('click', function () {
            console.log('bubble', 'div');
        }, false);
        div.addEventListener('click', function () {
            console.log('capture', 'div');
        }, true);

再看运行的结果:

capture div
bubble btn
capture btn
bubble div

此时结果是 捕获 div -> 冒泡 btn -> 捕获 btn -> 冒泡 div .

猜测结论: 在最后一个捕获元素中，冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关，谁先绑定就优先执行谁。

 

我们再改改页面代码:

 <div id="div">
            <div id="div1">
                <input type="button" value="banana" id="banana" />
            </div>
        </div> 

改改绑定事件的代码:

var btn = document.getElementById('banana');
        var div = document.getElementById('div');
        var div1 = document.getElementById('div1');
     
        btn.addEventListener('click', function () {
            console.log('bubble', 'btn');
        }, false);
        btn.addEventListener('click', function () {
            console.log('capture', 'btn');
        }, true);
       
       
        div.addEventListener('click', function () {
            console.log('bubble', 'div');
        }, false);
        div.addEventListener('click', function () {
            console.log('capture', 'div');
        }, true);
        

        div1.addEventListener('click', function () {
            console.log('bubble', 'div1');
        }, false);
        div1.addEventListener('click', function () {
            console.log('capture', 'div1');
        }, true);

点击button执行的结果:

capture div
 capture div1
bubble btn
capture btn
bubble div1
bubble div

此时结果是 :  捕获 div - > 捕获div1  - > 冒泡 btn -> 捕获 btn -> 冒泡 ->div1 -> 冒泡 div.

其它的元素都是按照先捕获后冒泡的顺序在执行，只有最后一个捕获元素中，冒泡和捕获的事件执行的先后顺序与事件绑定的先后顺序有关，谁先绑定就优先执行谁。