事件流中的事件捕获

最新推荐文章于 2023-03-25 22:55:55 发布

jiaojsun

最新推荐文章于 2023-03-25 22:55:55 发布

阅读量348

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/jiaojsun/article/details/77624882

版权

javascript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

Ie下是没有的捕获事件的，在绑定事件中，标准下是有的

首先来回顾一下事件冒泡

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

window.onload = function() {

    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    function fn1() {
        alert( this.id );
    }

    oDiv1.onclick = fn1;
    oDiv2.onclick = fn1;
    oDiv3.onclick = fn1;
    //我们点击div3，会依次弹出div3,div2,div1
    //false = 冒泡
    //也可以用下面这种方式，会有同样的效果
    //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
    /*oDiv1.addEventListener('click', fn1, false);
    oDiv2.addEventListener('click', fn1, false);
    oDiv3.addEventListener('click', fn1, false);*/

下来我们来认识一下事件捕获是什么样子的，同样是上面的代码，只不过事件绑定换成以下方式。我们点击div3，依次弹出div1,div2,div3。

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

window.onload = function() {        
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    function fn1() {
        alert( this.id );
    }       
    //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
    //true = 捕获
    oDiv1.addEventListener('click', fn1, true);
    oDiv2.addEventListener('click', fn1, true);
    oDiv3.addEventListener('click', fn1, true);

事件捕获：和事件冒泡相反，不太具体地节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
注意：事件执行的顺序是先捕获在冒泡
思考题，如下点击div3，弹出来的数字依次是什么？321

window.onload = function() {        
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    function fn1() {
        alert( this.id );
    }           
    oDiv1.addEventListener('click', function() {
        alert(1);
    }, false);
    oDiv1.addEventListener('click', function() {
        alert(3);
    }, true);
    oDiv3.addEventListener('click', function() {
        alert(2);
    }, false);  
}