&div id="id1" style="width:200 height:200 position: top:100 left:100 background-color: z-index:4"&
&div id="id2" style="width:200 height:200 position: top:20 left:70 background-color: z-index:1"&&/div&
&addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。
document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, false);
&点击id2的div结果是: id2， id1
document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);
document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true);
&结果是：id1，id2
DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数，分别为：事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。DOM事件流如图（剪自javascript高级程序设计）：
由图可知捕获过程要先于冒泡过程当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。
阅读(...) 评论()个人主页：
JavaScript部分
function ready() {
document.getElementsByTagName(&button&)[0].addEventListener(&click&, first, false);
document.getElementsByTagName(&div&)[0].addEventListener(&click&, second, true);
document.getElementsByTagName(&div&)[0].addEventListener(&click&, third, false);
function first() {
alert(&first&);
function second() {
alert(&second&);
function third() {
alert(&third&);
&body onload=&ready()& &
&div style=&width:200height:200background-color:&&
&button type=&button&&Test&/button&
当点击Test按钮时，事件执行顺序：second,first,third，为什么会这样？
这和当年Netscape与IE的浏览器之争分不开，他们两个浏览器的事件顺序不一致。
Netscape 支持事件捕捉（capturing），从顶层的父节点开始触发事件，从外到内传播。
IE则支持事件冒泡(bubbling)，从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。
然后我们来看看addEventListener()的第三个参数useCapture，这个参数决定要使用的事件处理程序的调用类型，
如果参数是true，事件处理程序以捕捉模式触发；
如果参数是false，事件处理程序以冒泡模式触发。
所以例子中函数调用的次序是：
捕获模式，second()，先于目标对象触发；
目标对象本身的事件处理程序，first()；
冒泡模式，third()，在目标对象之后触发。
本文已收录于以下专栏：
相关文章推荐
JavaScript之事件处理详解
function ready() {
document.getElementsByTagName(&button&)[0].addEventListener(&click&, ...
对于机器学习，很多人的观点是：机器学习技术是今后所有技术人员都绕不过的一个门槛。 那么，普通程序员该学习机器学作为一名对机器学习心有向往的程序员，我该以什么样的姿势开始呢？
javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：当上面的button被点击后，会弹出一个框显示“Button...
--&事件冒泡和捕获--&事件监听--&阻止事件传播
一、事件冒泡和捕获
1、概念：当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，点击子元素时，父元素的onclick事件也会...
JavaScript中的事件冒泡？事件传播的解释  
参与翻译：
事件冒泡是你在学习javaScript旅...
他的最新文章
讲师：唐宇迪
讲师：卿来云
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。JavaScript 参考手册
HTML DOM addEventListener() 方法
在文档中添加点击事件。当用户在文档任何地方点击时，在 id="demo" 的 &p& 元素上输出 "Hello World"：
document.addEventListener("click", function(){&&&
document.getElementById("demo").innerHTML = "Hello World";});
定义与用法
document.addEventListener() 方法用于向文档添加事件句柄。
提示： 可以使用
方法来移除 addEventListener() 方法添加的事件句柄。
提示：使用
方法为指定元素添加事件句柄。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
addEventListener()
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。
但是，对于这类浏览器版本可以使用 attachEvent() 方法来添加事件句柄（跨浏览器兼容问题可以查看"更多实例"）。
document.addEventListener(event, function,
useCapture)
必需。描述事件名称的字符串。注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
提示： 所有 HTML DOM 事件，可以查看我们完整的 。
必需。描述了事件触发后执行的函数。 当事件触发时，事件对象会作为第一个参数传入函数。
事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture
可选。布尔值，指定事件是否
在捕获或冒泡阶段执行。可能值：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
DOM 版本：
DOM Level 2 Events
没有返回值
修改记录：
在 Firefox 6 和 Opera 11.60
中 useCapture 参数是可选的。
（在 Chrome、IE 和 Safari 中一直都是可选的）。
您可以通过函数名来引用外部函数：
document.addEventListener("click",
myFunction);function myFunction() {&&& document.getElementById("demo").innerHTML = "Hello World";
您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。
该实例演示了如何在文档中添加两个点击事件：
document.addEventListener("click",
myFunction);document.addEventListener("click", someOtherFunction);
您可以在文档中添加不同类型的事件。
该实例演示了如何在文档中添加多个事件：
document.addEventListener("mouseover", myFunction);document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
当传递参数值时，使用"匿名函数"调用带参数的函数：
document.addEventListener("click", function() {&&&
myFunction(p1, p2);});
修改 &body& 元素的背景：
document.addEventListener("click", function(){&&&
document.body.style.backgroundColor = "red";});
使用 removeEventListener() 方法移除通过 addEventListener() 方法添加的事件句柄：
// 向文档添加事件句柄document.addEventListener("mousemove",
myFunction);// 移除文档的事件句柄
document.removeEventListener("mousemove", myFunction);
如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法：
if (document.addEventListener) {&&&&&&&&&&&&&&&&//所有主流浏览器，除了 IE 8 及更早 IE版本&&&
document.addEventListener("click", myFunction);} else if (document.attachEvent) {&&&&&&&&&&&&&//
IE 8 及更早 IE 版本&&&
document.attachEvent("onclick", myFunction);}
JavaScript 教程：
JavaScript 参考手册：
记住登录状态
重复输入密码}