详解addEventListener的三个参数之useCapture

网友投稿 215 2023-08-03


详解addEventListener的三个参数之useCapture

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。

复制代码 代码如下:

 

   

 

复制代码 代码如下:

var outDiv = document.getElementById("outDiv");

var middleDiv = document.getElementById("middleDiv");

var inDiv = document.getElementById("inDiv");

var info = dochttp://ument.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "
"; }, false);

middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "
"; }, false);

inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "
"; }, false);

上述是我们测试的代码,根据 info 的显示来确定触发的顺序,有三个 addEventListener,而 useCapture 可选值为 true 和 false,所以 2*2*2,可以得出 8 段不同的程序。

•全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;

•全为 true 时,触发顺序为:outDiv、middleDivhttp://、inDiv;

•outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;

•middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;

•……

最终得出如下结论:

•true 的触发顺序总是在 false 之前;

•如果多个均为 true,则外层的触发先于内层;

•如果多个均为 false,则内层的触发先于外层。

以上就是本文的全部内容了,希望大家能够喜欢。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java解析Excel内容的方法
下一篇:java实现合并2个文件中的内容到新文件中
相关文章

 发表评论

暂时没有评论,来抢沙发吧~