javascript addEventListener用法(转载)
![此博文包含视频](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
标签: 杂谈 | 分类: 计算机与 Internet |
addEventListener 用于注册事件处理程序,IE 中为attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEvent 比较简单,二来 addEventListener 才是 DOM 中的标准内容。
简介
addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序,在以前我们一般是
语法
- target
文档节点、document、window 或 XMLHttpRequest。 - type
字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 - listener
实现了 EventListener 接口或者是 JavaS cript 中的函数。 - useCapture
是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false。
示例
{
}
document.getElementByIdx_x("testButton").addEventListener("click", Go, false);
或者 listener 直接就是函数
说到 addEventListener 不得不说到事件流,先说事件流对后面的解释比较方便。
当一个事件发生时,分为三个阶段:
捕获阶段
目标阶段
冒泡阶段
举例
如果在 d3 上点击鼠标,事件流是这样的:
捕获阶段
目标阶段
冒泡阶段
注意,上述捕获阶段和冒泡阶段中,实际上 div1 之上还应该有结点,比如有 body,但这里不讨论。
addEventListener-第三个参数 useCapture
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。
var middleDiv = document.getElementByIdx_x("middleDiv");
var inDiv = document.getElementByIdx_x("inDiv");
var info = document.getElementByIdx_x("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、middleDiv、inDiv;
- outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
- middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;
- ……
最终得出如下结论:
- true 的触发顺序总是在 false 之前;
- 如果多个均为 true,则外层的触发先于内层;
- 如果多个均为 false,则内层的触发先于外层。
下面提供全部代码,您可以更改其中的 true、false 值,来进行测试。注意,不适用于 IE。
- >
- <</span>html
xmlns="http://www.w3.org/1999/xhtml"> -
- <</span>head>
- <</span>meta
http-equiv="Content-Language" content="zh-cn" /> - <</span>meta
http-equiv="Content-Type" content="text/html; charset=gb2312" /> - <</span>title>useCapture</</span>title>
- <</span>style
type="text/css"> - #outDiv
- {
-
padding:10px 10px 10px 10px; -
border:1px solid red; - }
-
- #middleDiv
- {
-
padding:10px 10px 10px 10px; -
border:1px solid green; - }
-
- #inDiv
- {
-
padding:10px 10px 10px 10px; -
border:1px solid blue; - }
- </</span>style>
- </</span>head>
-
- <</span>body>
-
- <</span>div
id="outDiv"> -
<</span>div id="middleDiv"> -
<</span>div id="inDiv">请在此点击鼠标。</</span>div> -
</</span>div> - </</span>div>
-
- <</span>div
id="info"></</span>div> -
- <</span>script
language="javascript" type="text/javascript">