事件分为: 事件捕获阶段 目标阶段 事件冒泡阶段
event.path记录了阶段过程 默认冒泡阶段触发事件
event.target事件对象中的目标对象当前所在的对象
addEventListener监听事件 第三个参数true flase都不阻止冒泡 只是设置哪个阶段触发
true 捕获阶段触发 false冒泡阶段触发
要阻止事件传递唯一方式就是阻止事件冒泡:事件对象调用stopPropagation()
e.stopPropagation() 不会阻止第二次监听事件
e.stopImmediatePropagation() 此代码还会阻止同一个目标的第二次监听事件 写两个 addEventListener的情况
e.preventDefault() 阻止本身点击事件但是不能阻止冒泡
事件链流程:
捕获阶段 从window->documnet->html->body->box1->box2->box3
若box3是被点击元素 box1 box2 绑定了事件 那么返回时 也就是冒泡阶段
冒泡阶段 box3->box2->box1->body->html->document->window 因为box2和box1绑定了所以先打印box2再打印box1
若点击box1 那么到box1便会冒泡回去 只会打印box1
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
事件代理利用的事件冒泡原理
事件代理:是一种设计思想 利用事件对象中 引用的目标对象这个技术来实现的
无论事件触发时 是不是目标对象的监听器 在监听器内部的事件对象event中都可以访问这个事件的目标对象利用这个特点去绑定事件给父级元素 来代理子级元素的业务 这种设计就是事件代理
传统点击事件:
这样的设计有两个缺点
1.静态的事件绑定 如果动态的添加元素进去 添加进去的元素没有这个事件
2.性能消耗更高 业务却比较相同
var box2=document.querySelectorAll(".box2")
box2.forEach(el => {
el.addEventListener("click",function(e){
console.log(this.innerHTML);
})
});
事件代理:
e.target.innerHTML执行的是当前被点击事件 监听的box1 打印box2
var box1=document.querySelector(".box1")
box1.addEventListener("click",function(e){
console.log(e.target.innerHTML);//点击box2冒泡上去执行box1监听 事件对象还是box2
})