原文：Event order 翻译：hh54188的博客 前言：虽然精通jquery，但对它的原型javascript却不是很了解，最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。 quirksmode的一系列文章都不错，通俗易懂，这篇只是一系列中的某一篇，有机会把javascript这系列都翻译给大家。 原文地址在这里http://www.quirksmode.org/js/events_order.html，句子中有标注“（？）”表示我对这个句子不是很理解，可能有误。正式开始： 事件的发生顺序 这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素 ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | ----------------------------------- ：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？换句话说，事件的发生顺序到底如何？ 两种模型 不出所料，在那些“不堪回首”（浏览器大战）的日子里，Netscape和微软有两种截然不同的处理方法：
这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件，Mozilla，Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持 捕获型事件 当你使用捕获型事件时 | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- ：元素1的事件处理函数首先被触发，元素2的事件处理函数最后被触发 冒泡型事件 当你使用冒泡型事件时 / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- ：元素2 的处理函数首先被触发，元素1其次 W3C 模型 W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段 | | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------ 为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。 假设你要做
如果用户单击元素2，则接下来会发生： （事件在这里就像一个观光客，由外至内游览，逐渐接近被触发的主要元素，然后又反向离开）
相反的情况是：
现在如果用户点击元素2会发生：
兼容性和传统模式 在支持w3c dom(文档对象模型) 的浏览器中，传统的事件绑定方法是
默认被视为在绑定于冒泡阶段 使用冒泡型事件 很少的开发人员会有意识的去使用冒泡型事件或者捕获型事件。在他们今天制作的网页中，没有必要让一个事件因为冒泡而被好几个函数处理。但是有时用户 通常会很疑惑，因为在他们只点击了一次鼠标之后出现了许多种情况（多个函数被执行，因为冒泡）。而大多数情况下你还是希望你的处理函数相互独立的。当用户 点击了某一个元素，发生什么，点击另一个元素，又对应发生些什么，相互独立，而不因为冒泡连锁。 |
