javaScript：事件冒泡和事件捕获

目录

什么情况下需要考虑事件冒泡

事件冒泡的过程

事件捕获 

相关代码 

阻止事件冒泡的方法 

---

什么情况下需要考虑事件冒泡

    需要考虑事件冒泡的条件

    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('中午吃麻辣烫')
})