摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。事件冒泡微软提出了名为事件冒泡的事件流。
事件冒泡与事件捕获
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。
Click me!
上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click的处理函数，那么我们怎么才能知道哪一个函数会首先被触发呢？
为了解决这个问题微软和网景提出了两种几乎完全相反的概念。
事件冒泡微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是p -> div -> body -> html -> document
事件捕获网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
上面的例子在事件捕获的概念下发生click事件的顺序应该是document -> html -> body -> div -> p
addEventListener的第三个参数“DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段，而作为开发者，我们可以选择事件处理函数在哪一个阶段被调用。
addEventListener方法用来为一个特定的元素绑定一个事件处理函数，是JavaScript中的常用方法。addEventListener有三个参数：
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件，第二个参数是触发事件后要执行的函数。而第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数。请看例子。
事件代理在实际的开发当中，利用事件流的特性，我们可以使用一种叫做事件代理的方法。
如果点击页面中的li元素，然后输出li当中的颜色，我们通常会这样写:
(function(){
var color_list = document.getElementById("color-list");
var colors = color_list.getElementsByTagName("li");
for(var i=0;i
利用事件流的特性，我们只绑定一个事件处理函数也可以完成：
(function(){
var color_list = document.getElementById("color-list");
color_list.addEventListener("click",showColor,false);
function showColor(e){
var x = e.target;
if(x.nodeName.toLowerCase() === "li"){
alert("The color is " + x.innerHTML);
}
}
})();
使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。
冒泡还是捕获？
对于事件代理来说，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。
IE浏览器兼容
IE浏览器对addEventListener兼容性并不算太好，只有IE9以上可以使用。
要兼容旧版本的IE浏览器，可以使用IE的attachEvent函数
object.attachEvent(event, function)
两个参数与addEventListener相似，分别是事件和处理函数，默认是事件冒泡阶段调用处理函数，要注意的是，写事件名时候要加上"on"前缀（"onload"、"onclick"等）。
感谢您的阅读，有不足之处请为我指出。
参考
HTML DOM addEventListener() Method -- w3schools
JavaScript高级程序设计(第3版)
attachEvent method -- MSDN
What is event bubbling and capturing -- Stack Overflow
文章同步在我的博客，本文链接：http://blog.acwong.org/2014/10/28/bubbling-and-capturing/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85364.html
摘要：直白点事件触发顺序子元素父元素事件冒泡和事件捕获图解标准事件监听标准事件监听其实是事件冒泡和事件捕获的混合体任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达。 前言 本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture 主要内容 事件捕获 含义:从最特定的事件目标到最不特定的事件目标(document对象...
摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。 什么是事件？（敲黑板） 事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动... 什么是事件...
摘要：浅谈事件事件流的事件流有提出的捕获流的冒泡流以及级事件流。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。事件处理函数需要注意的指的是或后面讨论。两种方法都会给事件处理函数传一个事件对象作为参数。 浅谈JavaScript事件 事件流 JavaScript的事件流有：Netscape提出的捕获流、IE的冒泡流以及DOM2级事件流。这里只讨论DOM2级事件流。 ...
摘要：开玩笑啦，提供一种方法叫做事件委托。途中经过各个层次的，并在各上触发捕获事件，直到到达时间的目标。懂得了事件冒泡的过程，就很容易明白事件委托的运作原理。 首先祝大家七夕快乐。。假如现在有一个的列表，里面可能会有若干个列表项。现在要为每一个列表项绑定相同的点击事件，现在你可能会有这几种做法： 手动为每一个列表项绑定事件； 在onload的时候，找到该列表，对其每一个子元素进行遍历，循环...
阅读 625·2023-04-26 01:53
阅读 2751·2021-11-17 17:00
阅读 2882·2021-09-04 16:40
阅读 1986·2021-09-02 15:41
阅读 834·2019-08-26 11:34
阅读 1224·2019-08-26 10:16
阅读 1337·2019-08-23 17:51
阅读 817·2019-08-23 16:50
