事件捕获和事件冒泡（一）

本文来源于WEB开发笔记 http://www.chhua.com , 原文地址： http://www.chhua.com/web-note1109 

一、什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

 

 

 

二、事件冒泡有什么作用

（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

 

【集中处理例子】

 

 

 

<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
<div id="inSide2" style="width:100px; height:100px; background:#000000"></div> 
</div> 
<script type="text/javascript"> 
//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。 
function eventHandle(e) 
{ 
var e=e||window.event; 
var obj=e.target||e.srcElement; 
alert(obj.id+' was click')
} 
</script>
 

 

【不想激活的事件被激活例子】

<div onclick="openWin('http://www.chhua.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> 
 
<script type="text/javascript"> 
//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开www.chhua.com发发首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。 
function openWin(url) 
{ 
window.open(url); 
} 


</script>

 

【阻止事件冒泡例子】

 

 

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> 
<script type="text/javascript"> 
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比） 
function showMsg(obj,e) 
{ 
alert(obj.id); 
stopBubble(e) 
} 
 
//阻止事件冒泡函数 
function stopBubble(e) 
{ 
if (e && e.stopPropagation) 
e.stopPropagation() //其它浏览器
else 
window.event.cancelBubble=true //ie下
} 
</script>

 

 

 

三、需要注意什么

●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。（2）Netscape4.0从外到里（outside→inside）的捕获型事件。（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。