- JS代码中,只能执行捕获或冒泡其中的一个阶段;
- onclick和attachEvent只能得到冒泡结算;
- addEventListener(type,listener,[useCapture])的第三个参数如果是true,则表示在事件捕获阶段调用事件处理程序;
- 如果是false(不写第三个参数默认就是false),表示在事件冒泡阶段调用事件处理程序
代码示例:
<button>按钮</button>
<script>
var btn = document.querySelector("button");
// 捕获阶段
// 捕获顺序 document->html->body->button
// 因为只有document和button绑定了click 所以这两个元素会被触发 且顺序是先弹222,然后是111
btn.addEventListener("click",function(){
alert(111);
},true)
document.addEventListener("click",function(){
alert(222);
},true)
</script>
如果第三个参数是false,或不写,则是冒泡阶段。
代码示例:
<button>按钮</button>
<script>
var btn = document.querySelector("button");
// 冒泡阶段
// 捕获顺序 button->body->html->document
// 因为只有document和button绑定了click所以这两个元素会被触发 且顺序是先弹111,然后是222
btn.addEventListener("click",function(){
alert(111);
},false)
document.addEventListener("click",function(){
alert(222);
},false);
</script>
总结:捕获阶段是从最外层往内层进行捕获的,先触发外层再触发内层,冒泡阶段是从内往外冒泡的,先触发内层,再触发外层。
但在实际开发中,最常用的还是冒泡阶段。
有些事件是没有冒泡的,比如onblur、onfoucs、onmousenter、onmouseleave。