javascript事件冒泡与事件捕获

最新推荐文章于 2025-09-26 23:30:00 发布

转载最新推荐文章于 2025-09-26 23:30:00 发布 · 511 阅读

本文详细解析了事件处理中的事件捕获与事件冒泡两种模型，并介绍了W3C模型如何结合这两种模型，同时给出了不同浏览器的支持情况及事件绑定示例。

转自：http://www.liloy.info/archives/103.html

javascript的核心就在于事件处理。我们经常会对一个对象进行事件绑定，加上事件处理函数。如果一个元素和它的一个上级节点对于同一个事件都有进行事件处理，哪一个先触发呢？毫无疑问，这决定于浏览器。

假设一个元素element1，它有一个下级元素element2。

如图：

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

这两个元素都绑定了click事件，如果用户点击了element2，它在element1和element2上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

两种模型

以前，Netscape和Microsoft是不同的实现方式。

Netscape中，element1先触发，这就叫做事件捕获。

Microsoft中，element2先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。Explorer只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera’s 和 iCab两种都不支持。

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即element1先触发，element2后触发。如图：

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2   /          |     |
|   -------------------------     |
|        事件捕获                 |
-----------------------------------

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即element2先触发，element1后触发。如图：

               /
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        事件冒泡                 |
-----------------------------------

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

                 | |  /
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2     /  | |          |     |
|   --------------------------------     |
|        W3C 模型                        |
------------------------------------------

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

比如：

 element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

这样绑定，点击element2后

从顶到底进行事件捕获，碰到了element1这个采用了事件捕获的元素，则doSomething2函数执行。
到达事件源元素element2后，从底到顶进行事件冒泡，碰到了element2这个采用了事件冒泡的元素，则doSomething函数执行。

比如：

 element1.addEventListener('click',doSomething2,false)

element2.addEventListener('click',doSomething,false)

这样绑定，点击element2后

从顶到底进行事件捕获，没有碰到任何采用事件捕获的元素。
到达事件源元素element2后，从底到顶进行事件冒泡，先碰到了element2这个采用了事件冒泡的元素，则doSomething函数执行，再碰到了element1这个采用了事件冒泡的元素，则doSomething2函数执行

与传统绑定事件方式的兼容

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

 element1.onclick  = doSomething2

IE浏览器

如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

element1.attachEvent("onclick", doSomething2);
element2.attachEvent("onclick", doSomething);

都是事件冒泡，因此，这样绑定后，点击element2后，没有事件捕获，从底到顶进行事件冒泡，先执行doSomething，再执行doSomething2。

这些是看的一篇英文资料加自己的总结，下一次整理一下阻止事件冒泡的资料。