`

事件捕获和事件冒泡(一)

阅读更多

本文来源于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)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。



 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics