本文深入探讨JavaScript中的事件流概念，包括事件捕获与冒泡机制，以及如何利用addEventListener方法进行事件处理程序的注册。同时介绍了如何阻止事件冒泡以及currentTarget属性的作用。
HTML和CSS代码支持页面的外观，JavaScript代码支持页面的行为，而JavaScript与HTML之间的交互是通过事件实现的。事件，是文档或者浏览器窗口中发生的一些特定的交互瞬间。我们可以通过事件处理程序来绑定事件，以便事件发生的时候能够执行相应的代码。
事件流
当浏览器发展到第4代时，浏览器开发团队遇到了一个问题：页面中的哪个元素会拥有某个特定的事件？当你单击某个按钮时，显然该单击事件并不仅仅发生在按钮上，它还发生在按钮的所有祖先元素上，比如按钮的容器元素，容器元素的父元素，甚至整个页面document。但是，哪个元素最先接收到该事件呢？页面接收事件的顺序又是怎样的呢？由此引出了事件流的概念。事件流描述的就是从页面中接收事件的顺序。
两个模型
Netscape和Microsoft给出了两个不同的结论。Netscape说document会首先接收到该事件，提出了事件捕获流。而Microsoft认为事件首先在按钮上发生，提出了事件冒泡流。
事件捕获
Netscape所提出的事件捕获的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。这样我们就能在事件到达目标节点之前捕获它。来看下面的例子：
| 01 | <!DOCTYPE html> |
| 02 | <html> |
| 03 | <head> |
| 04 | <title> event order test </title> |
| 05 | </head> |
| 06 | <body> |
| 07 | <div id= "div1"> |
| 08 | <button id= "btn1">按钮</button> |
| 09 | </div> |
| 10 | </body> |
| 11 | </html> |
如果你点击了页面中的按钮<button>元素，页面会按下面的顺序接收click事件：
事件冒泡
Microsoft所提出的事件冒泡的思想是最具体的DOM节点应该最先接收到事件，而最不具体的节点应该最后接收到事件。那么对于上面的例子，页面会按下面的顺序接收click事件：
W3C模型
W3C在这个竟争中明智地选择了折中的办法。在W3C事件模型中，任何事件会首先被捕获直至到达目标元素然后再冒泡回去。事件流包括3个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。Web开发者可以选择将事件处理程序注册在捕获或者冒泡阶段。这可以通过addEventListener()方法来实现。如果该方法传入的最后一个参数值为true，表示事件处理程序被注册在捕获阶段，如果为false表示件处理程序被注册在冒泡阶段。假设你的程序如下(element2是element1的子元素)：
| 1 | element1.addEventListener(“click”, doSomething2, true); |
| 2 | element2.addEventListener(“click”, doSomething, false); |
如果用户点击元素2会发生如下事情：
- 点击事件开始于捕获阶段。它会先查询是否有元素2的任何祖先元素在捕获阶段绑定了onclick事件。
- 它发现祖先元素1在捕获阶段绑定了onclick事件，于是element1.doSomething2()首先被执行。
- 事件一直查询到目标元素element2都没有再发现别的在捕获阶段绑定的onclick事件，事件转到它的冒泡阶段并执行doSomething()(注册在element2上的在冒泡阶段执行的事件处理程序)。
- 事件再次向上查询并检查是否有任何祖先元素在冒泡阶段绑定了onclick事件，并没有查询到，所以什么都没有发生。
再看相反的例子：
| 1 | element1.addEventListener(“click”, doSomething2, false); |
| 2 | element2.addEventListener(“click”, doSomething, false); |
现在如果用户点击元素2，下面的事情会按顺序发生：
- 点击事件发生于捕获阶段。事件查询元素2是否有任何祖先元素在捕获阶段绑定了onclick事件并且没有查找到这样的元素。
- 事件查询到目标元素element2自己。事件转为冒泡阶段并执行doSomething()。
- 事件再次向上查询并检查目标元素是否有任何祖先元素在冒泡阶段绑定了onclick事件。
- 它找到了满足条件的元素1，然后执行doSomething2()。
事件处理程序
Web浏览器中可能发生的事件有很多类型，如鼠标事件、文本事件、键盘事件等等。响应某个事件的函数就叫做事件处理程序，它会在对应事件发生的时候执行相应的代码。事件处理程序的名字以”on”开头，如click事件的事件处理程序就是onclick，mousemove事件的事件处理程序就是onmousemove。我们可以通过几种方式为事件指定事件处理程序。
1) HTML事件处理程序
每一个HTML元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
| 1 | <button id= "btn1" onclick= "alert('clicked')"> </button> |
它通过为button元素指定onclick特性，并给该特性赋JavaScript代码值实现当点击按钮时，显示一个警告框。
2) JavaScript指定事件处理程序
每个DOM元素都有自己的事件处理程序属性，如onclick, onmousemove，JavaScript指定事件处理程序就是通过将一个函数赋值给一个事件处理程序属性实现的，如下：
| 1 | var btn = document.getElementById("btn1"); |
| 2 | btn.onclick = function(){ |
| 3 | alert("clicked"); |
| 4 | }; |
以这种方式添加的事件处理程序会在事件流的冒泡阶段被执行。当然，这段代码运行之前，是不会执行事件处理程序的，换句话说，如果这段代码位于定义按钮的html代码后面，可能发生在页面加载过程中，有段时间点击按钮并没有任何响应事件，因为此时这段代码还未被执行。
另外一种方法是通过addEventListener()方法指定。所有DOM节点都包含这个方法，它接收三个参数：要处理的事件名，作为事件处理的函数和一个布尔值。第三个参数布尔值如果为true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。
| 1 | var btn = document.getElementById("btn1"); |
| 2 | btn.addEventListener("click", function(){ |
| 3 | alert("clicked"); |
| 4 | }, false); |
上述代码为按钮添加了一个onclick事件处理程序，该事件会在冒泡阶段被触发并执行事件处理程序。
它始终都会发生
你首先需要理解的是事件捕获或者冒泡始终都会发生。如果你为整个document定义一个onclick事件处理程序：
| 1 | document.onclick = function(){ |
| 2 | alert("clicked"); |
| 3 | }; |
在文档中任何元素上的任何点击事件最终都会冒泡到document，并且触发上面注册的事件处理程序，从而弹出一个警告框。只有当之前的事件处理程序阻止冒泡时，才不会冒泡到document上。
如果你的文档结构非常复杂，你可以通过阻止冒泡来节约系统资源。毕竟，浏览器必须查询事件目标的每一个祖先元素是否有绑定相同的事件，即使一个也没有找到，这个查询的过程仍然需要花费时间。
要想阻止冒泡，在Microsoft模型中，你需要将事件的cancelBubble属性设置为true。在W3C模型中，你需要调用事件的stopPropagation()方法。
这两种方法阻止了事件的所有冒泡。如果想解决浏览器兼容问题，你可以像下面这样写：
| 1 | function doSomething(e){ |
| 2 | if(!e){ |
| 3 | var e = window.event; |
| 4 | } |
| 5 | e.cancelBubble = true; |
| 6 | if(e.stopPropagation){ |
| 7 | e.stopPropagation(); |
| 8 | } |
| 9 | } |
在不支持cancelBubble属性的浏览器中设置它的值并不会报错。浏览器会忽略它并创建这个属性。当然，它并不能真正地阻止冒泡，但是给它分配值的操作本身是安全的。
currentTarget
就像我们之前看到的，一个事件拥有一个target或者srcElement属性，它包含一个对事件所发生的元素的引用。在我们的例子中是element2，因为用户点击的是它。
理解在捕获和冒泡过程中这个target是不会改变的是非常重要的：它始终是对element2的引用。
但是假设我们像下面这样注册这些事件处理程序：
| 1 | element1.onclick = doSomething; |
| 2 | element2.onclick = doSomething; |
如果用户点击element2，doSomething()会执行两次。但是你怎样知道哪一个HTML元素正在处理这个事件？target/srcElement并不能给出正确答案，因为它们始终是对element2的引用。
为了解决这个问题，W3C添加了currentTarget属性。它包含对正在处理事件的HTML元素的引用。不幸的是Microsoft模型并不支持类似的属性。
你也可以使用this关键字。在上面的例子中它引用正在处理事件的HTML元素，就像currentTarget属性。
扫一扫
1584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
