事件的捕获与冒泡

冒泡与捕获

先上代码

<div id="a">
        a
        <div id="b">
            b
            <div id="c">
                c
            </div>
        </div>
    </div>
           

document.getElementById('a').addEventListener('click', function(){
       console.log('a')
   })
   document.getElementById('b').addEventListener('click', function(){
       console.log('b')
   })
   document.getElementById('c').addEventListener('click', function(){
       console.log('c')
   })  
           

点击

c

区域，输出的顺序是 c b a

js事件的运行有2个阶段，一个是

捕获阶段

，一个是

冒泡阶段

，捕获阶段执行顺序是

a-b-c

,而冒泡阶段则相反，是

c-b-a

，事件是默认绑定在冒泡阶段的

上面的解释可以清楚为什么输出的顺序是

c-b-a

如果想要点击

c

时输出

a-b-c

要怎么做呢？可以使用

addEventListener

方法的

useCapture

参数,它默认是false,即绑定事件默认在冒泡阶段，如果设置为true,则父元素绑定的事件先执行

document.getElementById('a').addEventListener('click', function(){
       console.log('a')
   },true)
   document.getElementById('b').addEventListener('click', function(){
       console.log('b')
   },true)
   document.getElementById('c').addEventListener('click', function(){
       console.log('c')
   },true)  
           

阻止冒泡和捕获

stopPropagation

这个方法可以阻止冒泡，也可以阻止捕获，即只执行当前点击元素的事件

document.getElementById('a').addEventListener('click', function(e){
       console.log('a')
       e.stopPropagation()
   },true)
   document.getElementById('b').addEventListener('click', function(){
       console.log('b')
   },true)
   document.getElementById('c').addEventListener('click', function(){
       console.log('c')
   },true) 
           

stopImmediatePropagation

这个方法可以阻止冒泡和捕获，同时可以阻止该元素上同类事件被触发

document.getElementById('a').addEventListener('click', function(e){
       console.log('a1')
       e.stopImmediatePropagation()
   },true)
   document.getElementById('a').addEventListener('click', function(e){
       console.log('a2')
   },true)
           

如上代码，只会输出

a1

,不会输出

a2