事件的传播机制

分为三个阶段

  1. 捕获阶段:从外向里一次查找元素
  2. 目标阶段:当前事件源本身的操作
  3. 冒泡阶段:从内到外一次触发相关的行为(常用)
    使用DOM零级事件绑定给元素的某个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的.
    注意!是先捕获再冒泡
    冒泡阶段
    1)当元素的某行为如click行为被触发,如果给这个元素的行为绑定了方法,首先把当前元素对应的方法执行(目标阶段)
  4. 不仅仅当前元素的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()};
原文地址:https://www.cnblogs.com/Jiazexin/p/7080249.html