事件流中的事件捕获-白红宇的个人博客

事件流中的事件捕获

发布日期：2021-05-06 19:35:36 浏览次数：15 分类：原创文章

本文共 1951 字，大约阅读时间需要 6 分钟。

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);  }

好了，事件捕获就说到这里，不知道小伙伴们都看懂了吗？

上一篇：事件的取消

下一篇：事件绑定的第二种形式

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章