event.cancelBubble的理解

关于event.cancelBubble

由于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 >  

 

 原文出处：http://zhangwenzhuo.javaeye.com/blog/143730