首先,总结一下DOM中的事件对象:(符合W3C标准)
- preventDefault() 取消事件默认行为
- stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用
- stopPropagation() 取消事件冒泡对当前节点无影响
IE中的事件对象:(不符合W3C标准)
- cancelBubble() 取消事件冒泡
- returnValue() 取消事件默认行为
今天主要分析一下stopPropagation与cancelBubble的区别与使用效果。其实stopPropagation的作用跟cancelBubble是一样的,都是用来阻止浏览器默认的事件冒泡行为.
不同之处:(1)stopPropagation符合W3C标准,适用于FireFox等浏览器,不支持IE。
(2)cancelBubble方法不符合W3C标准,只支持IE浏览器。
<p>什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br>
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!<p>
<div id="a">
<ul id="lia">请单击下面的列表.会触发body事件
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ul id="lib">请单下面的列表.不会触发body事件.
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
document.body.onclick = function(){//首先为body元素绑定一个单击事件
alert("BODY事件");//单击页面即弹出对话框
}
function att_Event(){//为第一组li元素绑定onclick事件
var li = document.getElementById("lia").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
alert("Li事件");
}
}
}
function att_Event_b(){//为第二组li元素绑定onclick事件
var li = document.getElementById("lib").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(e){
alert("Li事件");
stopBubble(e); //运行阻止冒泡的函数
}
}
}
//该函数的功能用来阻止事件冒泡.并兼容多浏览器
function stopBubble(e){
//如果传入了事件对象.那么就是非IE浏览器
if(e){
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else{
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
window.onload = function(){
att_Event();
att_Event_b();
}
在JSRun中测试,可以看到点击id为lia的li标签时会分别出现“Li事件”和“BODY事件”两次弹出框提醒,即会触发body事件,在点击id为lib的li标签时,只出现一次“Li事件”弹出框,不会触发body事件,是因为使用了阻止事件冒泡的事件。