Js事件流(捕获阶段-目标阶段-冒泡阶段)

1、前言

DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

2、补充

事件句柄 : addEventListener(event, function, useCapture)
event : 不可缺省; 类型->字符串; 作用->指定事件名(不要使用 "on" 前缀)
function : 不可缺省; 类型->普通函数; 作用->指定要事件触发时执行的函数
useCapture : 可缺省; 类型->boolean; 作用->指定事件是否在捕获或冒泡阶段执行(true代表捕获阶段,false(默认)代表冒泡阶段),

3、例子

• 1、html

<div id="div1">我是div1
    <div id="div2">我是div2
        <div id="div3">我是div3
            <div id="div4">我是div4</div>
        </div>
    </div>
</div>

• 2、css

#div1{
    width: 400px;
    height: 400px;
    background: #f00;
}
#div2{
    width: 300px;
    height: 300px;
    background: #0f0;
}
#div3{
    width: 200px;
    height: 200px;
    background: #00f;
}
#div4{
    width: 100px;
    height: 100px;
    background: #f0f;
}

• 3、js

var div1=document.getElementById("div1"),
    div2=document.getElementById("div2"),
    div3=document.getElementById("div3"),
    div4=document.getElementById("div4");

    div1.addEventListener("click",function(){
        alert("我是div1_cap");
    },true)
    div1.addEventListener("click",function(){
        alert("我是div1_mao");
    },false)

    div2.addEventListener("click",function(){
        alert("我是div2_mao");
    },false)
    div2.addEventListener("click",function(){
        alert("我是div2_cap");
    },true)

    div3.addEventListener("click",function(){
        alert("我是div3_cap");
    },true)
    div3.addEventListener("click",function(){
        alert("我是div3_mao");
    },false)

    div4.addEventListener("click",function(){
        alert("我是div4_mao");
    },false)
    div4.addEventListener("click",function(){
        alert("我是div4_cap");
    },true)

4、结论

事件的整体执行顺序是：非目标元素捕获 -> 目标元素顺序执行 -> 非目标元素冒泡