目录
什么情况下需要考虑事件冒泡
需要考虑事件冒泡的条件
1.同一个页面区域内，具有多个元素
2.这些元素相互构成父子关系
3.这些元素同时绑定了相同的事件
事件冒泡的过程
事件冒泡的过程
从最内层元素最先开始，执行事件绑定的函数，函数执行完毕后，冒泡的父级上，查看父级元素有没有绑定事件，如果有，则执行父级元素上的该事件，如果没有则继续往上一级元素冒泡，查找事件，执行事件，冒泡最终的截止位置是 document
事件捕获
事件捕获
1.事件捕获是事件冒泡的反过程，时间冒泡先执行，然后从document开始，一直执行到事件出发元素。
2.只有通过 addEventListener(事件名，执行方法，true) 事件才会在 事件捕获阶段执行。
3.一般不用事件捕获。
相关代码
let wp = document.querySelector('.wp');
let cont1 = document.querySelector('.cont1');
let cont2 = document.querySelector('.cont2');
// wp.onclick = function(){
// alert('废寝忘食')
// }
// cont1.onclick = function(){
// alert('三月不知肉味')
// }
// cont2.onclick = function(){
// alert('民以食为天')
// }
// document.onclick = function(){
// alert('辟谷')
// }
//设置事件捕获案例
cont2.addEventListener('click',function(){
alert('高尚是高尚者的墓志铭')
},true) //true是否在事件捕获阶段执行
cont1.addEventListener('click',function(){
alert('卑鄙')
},true)
wp.addEventListener('click',function(){
alert('面朝大海，春暖花开')
},true)
document.addEventListener('click',function(){
alert('海子')
},true) 阻止事件冒泡的方法
阻止事件冒泡的方法：
1.使用事件对象的stopPropagation（）方法，来阻止事件冒泡
2.如果使用ie的 attachEvent 绑定事件，需要使用事件的event.cancelBubble = true;来阻止事件冒泡
标准浏览器和ie高版本，无论什么方式绑定的事件，都可以使用stopPropagation（）来阻止事件冒泡。
let far = document.querySelector('.far');
let son = document.querySelector('.son')
son.addEventListener('click',function(){
alert('中午吃啥')
console.log(event);
event.stopPropagation();
})
far.addEventListener('click',function(){
alert('中午吃泡馍')
})
document.addEventListener('click',function(){
alert('中午吃麻辣烫')
})
