http://www.cnblogs.com/quanhai/archive/2010/04/15/1712277.html
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD
Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。例子:
< html >
< body >
< table border ="1" width ="26%" id ="tableA" onclick ="alert('tableA')" >
< tr onclick ="tableA_rowA_click()" >
< td width ="106" > 一般 </ td >
</ tr >
< tr onclick ="tableA_rowB_click()" >
< td width ="106" > 阻止消息上传 </ td >
</ tr >
</ table >
< p > </ p >
</ body >
</ html >
<!-- -->
< script language ="javascript" >
<!--
function tableA_rowA_click(){
alert( ' tableA_rowA ' );
}
function tableA_rowB_click(){
alert( ' tableA_rowB ' );
event.cancelBubble = true ;
}
// -->
</ script >
event.cancelBubble阻止事件冒泡 event.cancelBubble=true;
取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事 件;event.cancelBubble=true;可以停止事件继续上传补充一点,Ie的事件传递是从下到上的:
事件来源对象->上级对象->上上级对象->.....->body->document->window
NS的事件传递是从上到下:
window->document->body->....->事件来源对象实例源码如下:
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > event.cancelBubble </ title >
< style >
<!--
* { font : menu }
-->
</ style >
</ head >
< body >
< span onclick =alert("你好") > 点我 < span > 再点我 </ span ></ span >< br >< br >
< span onclick =alert("你好") > 点我 < span onclick =event.cancelBubble=true; > 再点我 </ span ></ span >
</ body >
</ html >
实例2:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh" xml:lang ="zh" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< meta name ="developer" content ="Realazy" />
< title > Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo </ title >
< style type ="text/css" media ="screen" >
div * { display : block ; margin : 4px ; padding : 4px ; border : 1px solid white ; }
textarea { width : 20em ; height : 2em ; }
</ style >
< script type ="text/javascript" >
// <![CDATA[
function init(){
var log = document.getElementsByTagName( ' textarea ' )[ 0 ];
var all = document.getElementsByTagName( ' div ' )[ 0 ].getElementsByTagName( ' * ' );
for ( var i = 0 , n = all.length; i < n; ++ i){
all[i].onmouseover = function (e){
this .style.border = ' 1px solid red ' ;
log.value = ' 鼠标现在进入的是: ' + this .nodeName;
};
all[i].onmouseout = function (e){
this .style.border = ' 1px solid white ' ;
};
}
var all2 = document.getElementsByTagName( ' div ' )[ 1 ].getElementsByTagName( ' * ' );
for ( var i = 0 , n = all2.length; i < n; ++ i){
all2[i].onmouseover = function (e){
this .style.border = ' 1px solid red ' ;
if (e) // 停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true ;
log.value = ' 鼠标现在进入的是: ' + this .nodeName;
};
all2[i].onmouseout = function (e){
this .style.border = ' 1px solid white ' ;};
}
}
window.onload = init;
// ]]>
</ script >
</ head >
< body >
< h1 > Bubble in JavaScript DOM </ h1 >
< p > DOM树的结构是: </ p >
< pre >< code >
UL
- LI
- A
- SPAN
</ code ></ pre >
< div >
< ul >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
</ ul >
</ div >
< textarea ></ textarea >
< p > 鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停 ( < code > mouseover </ code > )事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的 边。 </ p >
< div >
< ul >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
</ ul >
</ div >
< p > 如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。 </ p >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > event.cancelBubble </ title >
< style >
<!--
* { font : menu }
-->
</ style >
</ head >
< body >
< span onclick =alert("你好") > 点我 < span > 再点我 </ span ></ span >< br >< br >
< span onclick =alert("你好") > 点我 < span onclick =event.cancelBubble=true; > 再点我 </ span ></ span >
</ body >
</ html >
实例2:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="zh" xml:lang ="zh" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< meta name ="developer" content ="Realazy" />
< title > Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo </ title >
< style type ="text/css" media ="screen" >
div * { display : block ; margin : 4px ; padding : 4px ; border : 1px solid white ; }
textarea { width : 20em ; height : 2em ; }
</ style >
< script type ="text/javascript" >
// <![CDATA[
function init(){
var log = document.getElementsByTagName( ' textarea ' )[ 0 ];
var all = document.getElementsByTagName( ' div ' )[ 0 ].getElementsByTagName( ' * ' );
for ( var i = 0 , n = all.length; i < n; ++ i){
all[i].onmouseover = function (e){
this .style.border = ' 1px solid red ' ;
log.value = ' 鼠标现在进入的是: ' + this .nodeName;
};
all[i].onmouseout = function (e){
this .style.border = ' 1px solid white ' ;
};
}
var all2 = document.getElementsByTagName( ' div ' )[ 1 ].getElementsByTagName( ' * ' );
for ( var i = 0 , n = all2.length; i < n; ++ i){
all2[i].onmouseover = function (e){
this .style.border = ' 1px solid red ' ;
if (e) // 停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble = true ;
log.value = ' 鼠标现在进入的是: ' + this .nodeName;
};
all2[i].onmouseout = function (e){
this .style.border = ' 1px solid white ' ;};
}
}
window.onload = init;
// ]]>
</ script >
</ head >
< body >
< h1 > Bubble in JavaScript DOM </ h1 >
< p > DOM树的结构是: </ p >
< pre >< code >
UL
- LI
- A
- SPAN
</ code ></ pre >
< div >
< ul >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
</ ul >
</ div >
< textarea ></ textarea >
< p > 鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停 ( < code > mouseover </ code > )事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的 边。 </ p >
< div >
< ul >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
< li >< a href ="#" >< span > Bubbllllllllllllllle </ span ></ a ></ li >
</ ul >
</ div >
< p > 如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。 </ p >
</ body >
</ html >