js事件传播流程，事件阻止

什么是JavaScript事件？

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。js事件是由访问web页面的用户引起的一系列操作。当用户执行某些操作的时候，再去执行一系列代码，或者用来获取的详细信息。eg：鼠标位置，键盘按键。

DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

注意：

（1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
（2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
（3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。

CSS代码

HTML和JS

DOM事件处理程序：

三个参数：事件、处理函数、事件处理阶段（true捕获false冒泡）
最大的优点：可以为一个对象添加多个事件，不会相互覆盖，而是按某种顺序依次执行

同时添加多个相同的事件，事件处理函数依次，不会覆盖

inner.addEventListener(“click”,foo,false); inner.addEventListener(“click”,bar,false);
运行结果：

支持捕获
inner.addEventListener(“click”,foo,true); outer.addEventListener(“click”,aa,true); inner.removeEventListener(“click”,foo);
运行结果：

移除事件：

removeEventListener()不能移除匿名函数。

由此可见：确实是先由外向内事件捕获，一直到事发元素，在由内向外冒泡到根节点上。

阻止冒泡的兼容

问题描述：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了则外面元素的事件也会依层触发。
解决方法：if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; }前者是阻止非IE浏览器的冒泡问题，后者是阻止IE浏览器的冒泡问题。

阻止默认行为的兼容

问题描述：w3c的方法是：e.preventDefault()　　 IE浏览器的方法是：e.returnValue=false
解决办法：在需要阻止的默认事件中把两句话都写上，或者直接在最后加一个 return false