1. 程式人生 > >DOM操作中的事件流概念

DOM操作中的事件流概念

在HTML中多個巢狀的標籤,如果他們都擁有相同觸發條件的事件,最內部的標籤事件被觸發後,外邊多個標籤的同類型事件也會被觸發,多個標籤同時執行他們同類型事件效果稱為“事件流”

如何避免事件流??

通過獲取事件物件可以阻止事件流,

主流瀏覽器(IE9以上版本瀏覽器):

    node.onclick = function(evt){evt就是事件物件}

    addEventListener(型別,function(evt){}/函式名字);

    function 函式名稱(evt){}

    事件處理函式的第一個形參就是事件物件

    event.stopPropagation();

舉個栗子::

下面3個div,他們都有“onClick”事件

<div id="d1" class="dd1" onClick="dj1()">
   <div id="d2" class="dd2" onClick="dj2()">
        <div id="d3" class="dd3" onClick="dj3()">
        </div>
   </div>
</div>

var bt1= document.getElementById("d1");
var bt2= document.getElementById("d2");
var bt3= document.getElementById("d3");
    
function dj1(){
    alert("你好d1");
}    
function dj2(){
    alert("你好d2");
}
bt2.addEventListener('click',function(e){e.stopPropagation()},false);
bt3.addEventListener('click',function(e){e.stopPropagation()},false);
function dj3(){
    alert("你好d3");
}