在HTML中多個嵌套的標籤,若是他們都擁有相同觸發條件的事件,最內部的標籤事件被觸發後,外邊多個標籤的同類型事件也會被觸發,多個標籤同時執行他們同類型事件效果稱爲「事件流」node
如何避免事件流??瀏覽器
經過獲取事件對象能夠阻止事件流,函數
主流瀏覽器(IE9以上版本瀏覽器):對象
node.onclick = function(evt){evt就是事件對象}事件
addEventListener(類型,function(evt){}/函數名字);get
function 函數名稱(evt){}io
事件處理函數的第一個形參就是事件對象event
event.stopPropagation();function
舉個栗子::class
下面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");}