[JS]事件捕获和冒泡

1.在浏览器大战期间对于事件的处理Netscape和Microsoft是不同的实现方式。

网景采用的是捕获流,微软采用的是冒泡流

在如下代码中

<div class="parent">
    <span class="child"></span>
</div>
_事件绑定
如果给div和span都绑定了click事件,用户点击span标签的时候div和span标签上的click事件均会触发的.但是触发的顺序在冒泡流和捕获流中的顺序是不一样的;在冒泡流中span上的事件先行触发,然后才是div上的事件触发,但是在捕获流中的触发顺序是先是div上的事件触发,然后才是span上的事件触发.
在DOM中是综合和两种触发事件流,任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
通常程序员可以自行选择采用哪种事件流:
　　ele.addEventListener('click',doSomething,true);
　　参数三:true表示的是捕获;false表示的冒泡
　　但是在部分IE浏览器中不支持addEventListener(),没法通过第三个参数来设置是冒泡还是捕获,但是在不支持addEventListener()方法的浏览器中默认采用的就是冒泡流,且绑定事件的的方法是ele.attachEvent("onclick", doSomething);

_事件阻止
事件的触发过程也是可以阻止的,由于IE和非IE浏览器的事件绑定方法不同那么其阻止事件的方法也会不同的

• 在DOM中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
一般为了浏览器的兼容性写法如下
if(e.stopPropagation){
　　e.stopPropagation();
}else{
　　e.cancelBubble=true;
}
*在阻止事件事件的时候有两种方法分别是:stopPropagation()和stopImmediatePropagation()两个是有却别的

stopPropagation()方法是作用在后续节点上的,不能阻止当前节点的事件

stopImmediatePropagation()方法是作用的当前节点的,当然后续节点也是有用的

如果的$("span.child")上绑定两个点击事件,在$("div.parent")上绑定事件,如果在span的第一个点击事件后放置stopPropagation()方法,当前节点的第二个点击事件还会继续执行的,但是如果是stopImmediatePropagation()方法那么第一个绑定事件执行完后不会调用第二个绑定事件;
当然不管是绑定的stopPropagation()还是stopImmediatePropagation()后续的div上的事件均不会触发的.

_事件取消

取消事件是取消函数执行后的浏览器默认行为,而不是退出函数.如果希望取消事件的同时又想退出函数就需要取消事件的同时return退出函数
取消事件
　　在DOM中:e.preventDefault();
　　IE:e.returnValue = false;
_上述说的IE浏览器指的是IE8及以下版本的浏览器,在高级IE浏览器中开始遵守DOM标准了

2.事件分为三个阶段：

依次为 ①捕获阶段，②目标阶段，③冒泡阶段，
第一阶段：事件从文档根元素开始逐层向下传递，直到找到事件目标，
第二阶段：找到事件目标并触发相应的事件，
　　获取目标:DOM:e.target
　　　　　　 IE8:e.SRCElement
第三阶段：从目标逐层向上返回到根节点，

利用事件冒泡优化规则:如果多个同级子元素,都绑定了相同的事件处理函数,就可以仅在父元素上绑定一次即可,如果页面中的绑定事件处理函数越多,执行效率越低,所以要尽量减少处理函数的绑定次数