10.1事件的冒泡机制

从捕获阶段 到 目标阶段 再到 冒泡阶段 的过程称为事件流。

• 先执行捕获再执行冒泡

• 如果事件绑定的是目标元素， 那么是按照绑定事件函数的先后顺序来依次执行（跟捕获冒泡没关系）

• DOM0捕获不到捕获阶段，只有冒泡阶段.

从window 到 目标点的阶段 叫捕获阶段

在捕获的过程中
如果上级和下级(祖先级关系)绑定同一事件函数
那么先触发上级的在触发下级的

从目标点由下而上 直到window 叫做冒泡阶段

在这个过程中，如果上级和下级同理有祖先关系
绑定同一事件函数 先触发目标 再触发目标的上级
这整个过程叫做事件流 事件模型

box1.addEventListener(不带on的事件名,function(){
    alert('red');
},是否捕获);  

捕获就为: true
冒泡就为:false  （默认）

image.png

来看看以下输出的是什么把

    

        

            按钮
        
    


function fn(){alert('btn1');}

btn.addEventListener('click',fn,true);

btn.addEventListener('click',function(){
    alert(1);},true);
btn.addEventListener('click',function(){
    alert(2);},true);
box1.addEventListener('click',function(){alert('red');});
btn.addEventListener('click',fn,true); 
box3.addEventListener('click',function(){alert('yellow');},true);
box2.addEventListener('click',function(){alert('blue');},true);
box2.addEventListener('click',function(){ alert('green');});
btn.addEventListener('click',function(){alert('btn捕获');},true);
btn.addEventListener('click',fn,false);
btn.addEventListener('click',function(){alert('btn冒泡');});
btn.addEventListener('click',function(){alert('btn冒泡2');});

阻止冒泡：

ev.stopPropagation()
IE 低版本：ev.cancelBubble = true;
取消冒泡后，事件不会再向上传播；更高层级的元素的对应事件不会触发；

可参照https://editor.csdn.net/md/?articleId=90106100