javascript 事件冒泡

【 tulaoshi.com - Web开发 】

Html代码
!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" / 
titleBubble in JavaScript DOM/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 
h1Bubble in JavaScript DOM/h1 
pDOM树的结构是：/p 
precode 
UL  
  - LI  
     - A  
   - SPAN  
/code/pre 
div 
 ul 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
 /ul 
/div 
textarea/textarea 
p鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（codemouseover/code）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。/p 
div 
 ul 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
 /ul 
/div 
p如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。/p 
/body 
/html