什么是事件流?
浏览器最初开始支持事件时,同一个事件仅仅只有一个元素相应。后来认为仅仅支持一个单一事件是不够的,而IE4之后提出了事件流的概念,一个元素可以支持多个事件。常见的事件流有冒泡型事件和捕捉型事件。
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件 ;需要注意的是IE浏览器不支持捕获类型事件;相反的,事件冒泡是自下而上的去触发事件
添加事件监听时阻止冒泡
绑定事件方法 addEventListener 的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
// 阻止冒泡前
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发");
})
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发")
})
// 阻止冒泡后
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发");
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发")
},true)
直接绑定事件时阻止冒泡
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>
// 先触发li; 再触发ul; 然后触发div
阻止冒泡
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
取消默认事件
默认行为即标签本身自带的行为,如<a>标签的默认跳转、<input type="submit" >等
<a href="http://www.baidu.com/" id="test" >百度一下,你就知道</a>
var a = document.getElementById("test");
a.onclick =function(e){
if(e && e.preventDefault){
e.preventDefault(); // W3C取消默认事件
}else{
window.event.returnValue == false; //IE中阻止函数器默认动作的方式
}
}
// 或者可以使用return false
a.onclick = function(){
return false;
};