javascript 冒泡 捕获

冒泡/捕获

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法，并且大多数新浏览器都遵循这两种事件流方式。

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

阻止冒泡/阻止捕获

阻止冒泡

如果我们不希望事件冒泡，如何阻止事件冒泡？
实际上，事件的对象哟一个 stopPropagation() 方法可以阻止事件冒泡：

document.getElementById("button").addEventListener("click", function(e){  alert("button");  e.stopPropagation();},false);

这样，点击 button 后，只会弹出一个弹窗，显示 button.

注意：现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。

阻止捕获

我们如何才能阻止事件的捕获呢？使用 event.stopPropagation() 方法吗？答案是否定的，这里要知道，stopPropagation() 方法只能阻止事件的冒泡，而不能阻止事件捕获。

但是我们可以使用 DOM3 级新增事件 stopImmediatePropagation() 方法来阻止事件捕获，另外此方法还可以阻止事件冒泡：

document.getElementById("second").addEventListener("click", function(e){  alert("second");  e.stopImmediatePropagation();},true);

这样，就可以在 id 为 second 处阻止事件的捕获了。
注意：尽管这是 Netscape Navigator 提出的事件流，但是现在所有的浏览器都支持这种事件流模型。但是由于老的浏览器不支持，所以很少有人使用事件捕获。