日期:2014-05-16  浏览次数:20344 次

生动详细解释javascript的冒泡和捕获,包懂包会

原文地址在这里http://www.quirksmode.org/js/events_order.html,句子中有标注“(?)”表示我对这个句子不是很理解,可能有误。正式开始:

事件的发生顺序

这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素

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

:并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2,则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何?

?

两种模型

不出所料,在那些“不堪回首”(浏览器大战)的日子里,Netscape和微软有两种截然不同的处理方法:

  • Netscape主张元素1的事件首先发生,这种事件发生顺序被称为捕获型
  • 微软则保持元素2具有优先权,这种事件顺序被称为冒泡型

这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件,Mozilla,Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

?

捕获型事件

当你使用捕获型事件时

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

:元素1的事件处理函数首先被触发,元素2的事件处理函数最后被触发

冒泡型事件

当你使用冒泡型事件时

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

:元素2 的处理函数首先被触发,元素1其次

W3C?模型