JS --- 事件冒泡和捕获

事件捕获:父级元素先触发，子级元素后触发
事件冒泡:子级元素先触发，父级元素后触发
附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。
IE内核浏览器的事件模型是冒泡型事件（没有捕获事件过程），事件句柄的触发顺序是从ChildNode到ParentNode。
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

JS阻止事件冒泡

<div id="d1" style="width:300px;height:300px;background:#f90">
    <div id="d2" style="width:100px;height:100px;background:#f60">
    </div>
</div>
    
<script type="text/javascript">
    var d1=document.getElementById("d1");
    var d2=document.getElementById("d2");
        
    d1.onclick=function(){
        alert("大的被点击");     
    }
        
    d2.onclick=function(ent){
            alert("小的被点击");
            //判断是否是ie浏览器
        if(document.all){   
            window.event.cancelBubble=ture;
        }else{
            ent.stopPropagation()
            
            }       
        }
</script>

JQ阻止冒泡

$("div").click(function(event){
    alert("aaa");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click   
} );

addEventListener
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。
ele.onclick = doSomething2

attachEvent
IE浏览器，如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
ele.attachEvent("onclick", doSomething2);

事件的注册机制：

DOM标准的浏览器事件注册方法是通过addEventListener方法注册，而IE内核的浏览器则是通过attachEvent方法注册。
这两个方法的区别：
addEventListener方法带有三个参数，分别是：eventType、handler、useCapture。
eventType不带有on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。

var ancestorHandler = function (e){ 
  //...... 
}, 
childHandler = function (e){ 
  //...... 
}; 
document.querySelector('#ancestor').addEventListener('click',ancestorHandler,true);//注意第三个参数 
document.querySelector('#child').addEventListener('click',childHandler,true);//注意第三个参数 

var ancestorHandler = function (e){ 
  //...... 
}, 
childHandler = function (e){ 
  //...... 
}; 
document.getElementById('ancestor').attachEvent('onclick',ancestorHandler);//注意没有第三个参数 
document.getElementById('child').attachEvent('onclick',childHandler);//注意没有第三个参数 

事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

阻止事件的默认行为，例如click 后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

转载于:https://www.cnblogs.com/flower46273736/p/6420302.html