事件捕捉和事件冒泡的学习

先看一道题，
（不定项选择）以下关于DOM事件流的表述哪些是正确的

• A、事件流包括两个阶段：事件捕获阶段、事件冒泡阶段
• B、IE跟标准浏览器对于DOM事件流实现不一样
• C、假设parentEle是childEle的父节点，绑定事件：

parentEle.addEventListener("click",fn1, false)和childEle.addEventListener("click", fn2,false)

,当点击childEle的时候fn1将先于fn2触发
- D、addEventListener第三个参数true代表支持捕获，false代表不支持捕获

答案：B

解析：

在W3C事件模型中，任何事件会首先被捕获直至到达目标元素然后再冒泡回去。事件流包括3个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。所以A选项是错的。Web开发者可以选择将事件处理程序注册在捕获或者冒泡阶段。这可以通过addEventListener()方法来实现。如果该方法传入的最后一个参数值为true，表示事件处理程序被注册在捕获阶段，如果为false表示件处理程序被注册在冒泡阶段。所以D选项也是错的。

假设有如下程序(childEle是parentEle的子元素)：

1.parentEle.addEventListener("click", parentDoSomething, true);2.childEle.addEventListener("click", childEleDoSomething, false);

如果用户点击子元素childEle会发生如下事情：

a、点击事件开始于捕获阶段。它会先查询是否有childEle的任何祖先元素在捕获阶段绑定了onclick事件。

b、它发现祖先元素1在捕获阶段绑定了onclick事件，于是parentEle.parentDoSomething()首先被执行。

c、事件一直查询到目标元素childEle都没有再发现别的在捕获阶段绑定的onclick事件，事件转到它的冒泡阶段并执行childEleDoSomething()(注册在childEle上的在冒泡阶段执行的事件处理程序)。

d、事件再次向上查询并检查是否有任何祖先元素在冒泡阶段绑定了onclick事件，并没有查询到，所以什么都没有发生。

再看相反的例子：

1.parentEle.addEventListener("click", parentDoSomething, false);2.childEle.addEventListener("click", childEleDoSomething, false);

现在如果用户点击childEle，下面的事情会按顺序发生：

a、点击事件发生于捕获阶段。事件查询childEle是否有任何祖先元素在捕获阶段绑定了onclick事件并且没有查找到这样的元素。

b、事件查询到目标元素childEle自己。事件转为冒泡阶段并执行childEleDoSomething()。

c、事件再次向上查询并检查目标元素是否有任何祖先元素在冒泡阶段绑定了onclick事件。

d、它找到了满足条件的parentEle，然后执行parentDoSomething()。所以选项C是错的，应该是fn2先触发。

因为IE没有提供对事件捕获阶段的支持，所以IE跟标准浏览器对于DOM事件流实现不一样。 所以最终答案应该为B。

另外，跨浏览器的停止事件传递的方法是:

function someHandle(event) {  event = event || window.event;   if(event.stopPropagation)     event.stopPropagation();  else event.cancelBubble = true; }

跨浏览器的取消事件传递后的默认处理方法是：

function someHandle(event) {    event = event || window.event;    if(event.preventDefault)      event.preventDefault();    else event.returnValue = false;  }

这里顺便再复习一下概念：

取消事件传递是指，停止捕获型事件或冒泡型事件的进一步传递。

事件传递后的默认处理是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。

本文参考了
1.http://www.cnblogs.com/ilexcai/archive/2011/09/05/2168094.html
2.https://github.com/TimTsang/front-endOnlineExamination