二、事件流程

• 整个事件流程分为：捕获和冒泡。

  • 捕获：事件从最顶层元素开始执行，一层一层往下，直到最精确的元素。

  • 冒泡：事件从最精确的元素开始执行，一层一层往上，直到最顶层元素。

  • 当处于最精确元素的时候是不区分捕获和冒泡的。

DOM结构：

<div id="box">
    <div id="box1">
        <div id="box2"></div>
    </div>
</div>

执行代码：

// 获取元素
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
// 绑定点击事件
box.onclick = function(){
    console.log("box");
}
box1.onclick = function(){
    console.log("box1");
}
box2.onclick = function(){
    console.log("box2");
}

输出结果：