事件的传播机制
分为三个阶段
- 捕获阶段:从外向里一次查找元素
- 目标阶段:当前事件源本身的操作
- 冒泡阶段:从内到外一次触发相关的行为(常用)
使用DOM零级事件绑定给元素的某个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的.
注意!是先捕获再冒泡
冒泡阶段
1)当元素的某行为如click行为被触发,如果给这个元素的行为绑定了方法,首先把当前元素对应的方法执行(目标阶段) - 不仅仅当前元素的click行为被触发了,他所有父级元素的click行为也会被触发,也就是说如果父级元素事件上绑定的有方法的话也会被触发执行
同理一次查找直到document
注意每个浏览器传播到最顶层是不一样的,谷歌中最高到document,但是在ie之传播到html
addEvenListener DOM二级事件
第一个参数是行为的类型 第二个参数是给当前的行为绑定的方法,第三个参数是控制在哪个阶段发生: true->在捕获阶段发生 false->在冒泡阶段发生(不传参数默认就是冒泡)
document.body.addEventList("click",function(e){
console.log("body");
},false);
我们只能阻止冒泡不能阻止捕获
阻止冒泡:事件对象中对象中的一个方法属性:e.stopPropagation()
在IE低版本没有这个东西,只有e.cancelBabble()
兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble()};