2017-04-16

事件的传播机制（5-1）

DOM

事件的默认传播机制：

[ ] 捕获阶段：从外向里依次查找元素
[ ] 目标阶段：当前事件源（e.target:触发哪个元素就存储哪个元素）本身的操作
[ ] 冒泡阶段：从内向外依次触发相关行为（最常用）；
事件在冒泡阶段执行
使用DOM0级事件（element.onclick）绑定给元素的某个行为绑定的方法，都是在行为触发后的冒泡阶段把方法执行的
1
2
3
4
5
6
inner.onclick=function(e){
console.log("center");
}
outer.onclick=function(e){
console.log("center");
}

事件在捕获阶段执行

使用DOM2级事件（element.addEventListener）事件到达预定目标之前捕获它

//addEventListener-->参数1：行为类型； 参数2：绑定方法 ； 参数3：控制哪个阶段发生，true(捕获阶段发生)false（冒泡阶段发生）
   document.body.addEventListener("click", function(e) {
        console.log("body");
    },false); //冒泡阶段发生
    outer.addEventListener("click", function(e) {
        console.log("outer");
    }, true);//捕获阶段发生
    inner.addEventListener("click", function(e) {
        console.log("inner");
    }, false); //冒泡阶段发生
    // 输出结果 outer-->inner-->body(不管center绑定方法，一旦触发就存在事件的传播机制)

图片6-7

事件在冒泡阶段执行

事件在捕获阶段执行