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