首页 > 代码库 > 冒泡事件
冒泡事件
什么是JS事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
<divid="divOne"onclick="alert(‘我是最外层‘);">
<divid="divTwo"onclick="alert(‘我是中间层！‘)">
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"onclick="alert(‘我是最里层！‘)">点击我</a>
</div>
</div>
1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.returnfalse;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
如果把它放在头部A标签的click事件中，点击“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
<html>
<head>
<title>阻止冒泡</title>
<style>
body{ color:#333; font-size:12px; }
</style>
</head>
<body>
<p>什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
<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>
<script language="javascript">
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 && e.stopPropagation){
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else
{
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
window.onload = function(){
att_Event();
att_Event_b();
}
</script>
</body>
</html>
冒泡事件