DOM事件机制——捕获与冒泡

事件捕获与冒泡

首先线上一段代码，问：点击中间的按钮后，三个div的调用顺序是怎样的？

是son-father-grandpa还是grandpa-father-son？

<div class="grandpa" >
<div class="father" >
<div class="son" >
按钮
</div>
</div>
</div>

答案是：都可以。IE5认为是son-father-grandpa，而网景认为是grandpa-father-son。但是经过和事佬W3C的调节，最终形成了这样的规则：首先按grandpa-father-son看有没有函数监听，然后按son-father-grandpa看有没有函数监听。有则调用，没有则跳过。

而后，插入术语：

可以用addEventListener('click',fn,boolean)自己决定冒泡还是捕获。boolean默认为falsy，走冒泡；若boolean为true，则走捕获。

取消冒泡

捕获不可以取消，但冒泡可以取消。

用e.stopPropagation()即可将冒泡中断再这一层。

特例：有些事件不可取消冒泡，比如scroll event。它的cancelable属性值为No，所以不可取消冒泡。