JavaScript 中addEvent事件参数详解

addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture，本文就讲解它。

<div id="outDiv"><div id="middleDiv"><div id="inDiv">请在此点击鼠标。</div></div>
</div><div id="info"></div>var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

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

全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；
全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；
outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv；
middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
……

最终得出如下结论：

true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。

JavaScript 中addEvent事件参数详解相关推荐

Javascript中Window.open参数详解
关于Window.open的参数小结(参书改编) 先看一个例子: [javascipt:]window.open("Webpage.asp?",Derek,"height ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
python xgboost参数_xgboost中XGBClassifier(）参数详解
常规参数 booster gbtree 树模型做为基分类器(默认) gbliner 线性模型做为基分类器 silent silent=0时,不输出中间过程(默认) silent=1时,输出中间过程 n ...
php 实现setinterval,JavaScript中setInterval的使用详解
相信很多大伙都知道JavaScript中setInterval的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象,也有很多小伙伴对此也只是知道setInterval的定义.也是一知半解,今天我 ...
mysql binlog event_MySQL binlog中的事件类型详解
MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...
Python数据可视化——matplotlib.pyplot中plt的参数详解
matplotlib.pyplot中plt的参数详解: #平滑折线的示例 # plt.plot(xnew, ynew, marker='.', markevery=markevery, ls='-', ...
站长在线Python精讲：在Python函数中的默认参数详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python函数中的默认参数详解>.本文的主要内容有:默认参数的概念和默认参数的示例.默认参数不能设置可变对象. 目录 1 ...
站长在线Python教程精讲：在Python函数中的关键字参数详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python函数中的关键字参数详解>.本文的主要内容有:关键字参数的含义和关键字参数的应用举例. 目录 1.关键字参数的含 ...
pandas中的read_csv参数详解
1.官网语法 pandas.read_csv(filepath_or_buffer, sep=NoDefault.no_default**,** delimiter=None**,** header= ...

JavaScript 中addEvent事件参数详解

JavaScript 中addEvent事件参数详解相关推荐

最新文章

热门文章