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");
}