JS-事件链

addEventListener第三个参数 true就是捕获阶段触发 false是冒泡阶段触发(默认是冒泡阶段触发)

box1.addEventListener("click", () => {
    console.log("111111");
}, true) // 在捕获阶段触发
 
box1.addEventListener("click", () => {
    console.log("111111");
}, false) // 在冒泡阶段触发

addEventListener的第三个参数true或false都不会阻止事件传递

要阻止事件传递 唯一方式就是阻止事件冒泡：事件对象调用stopPropagation()

box3.addEventListener("click", (e) => {
    e.stopPropagation(); // 阻止事件冒泡(运行后阻止)
    console.log("box3333");
})

 阻止系统默认事件: preventDefault()

事件代理：网页设计中的一种设计思想 利用事件对象中引用的目标对象这个技术来实现的,无论事件触发时是不是目标对象的监听器 在监听器内部的事件对象event中都可以访问这个事件的目标对象 利用这个特点去绑定事件给父级元素 来代理子级元素的业务