javascript 事件冒泡

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <meta name="developer" content="Realazy" />  
  7. <title>Bubble in JavaScript DOM</title>  
  8. <style type="text/css" media="screen">  
  9.  div * {display:block; margin:4px; padding:4px; border:1px solid white;}   
  10.  textarea {width:20em; height:2em;}   
  11. </style>  
  12. <script type="text/javascript">  
  13.     //<![CDATA[  
  14.     function init(){  
  15.   var log = document.getElementsByTagName('textarea')[0];  
  16.   var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');  
  17.   for (var i = 0, n = all.length; i < n; ++i){  
  18.    all[i].onmouseover = function(e){  
  19.     this.style.border = '1px solid red';  
  20.  
  21.     log.value = '鼠标现在进入的是: ' + this.nodeName;  
  22.    };  
  23.    all[i].onmouseout = function(e){  
  24.     this.style.border = '1px solid white';  
  25.    };  
  26.   }  
  27.  
  28.   var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');  
  29.   for (var i = 0, n = all2.length; i < n; ++i){  
  30.    all2[i].onmouseover = function(e){  
  31.     this.style.border = '1px solid red';  
  32.  
  33.     if (e) //停止事件冒泡  
  34.      e.stopPropagation();  
  35.     else  
  36.      window.event.cancelBubble = true;  
  37.       
  38.     log.value = '鼠标现在进入的是: ' + this.nodeName;  
  39.    };  
  40.    all2[i].onmouseout = function(e){  
  41.     this.style.border = '1px solid white';  
  42.    };  
  43.   }  
  44.  }  
  45.  window.onload = init;  
  46.     //]]>  
  47. </script>  
  48. </head>  
  49. <body>  
  50. <h1>Bubble in JavaScript DOM</h1>  
  51. <p>DOM树的结构是:</p>  
  52. <pre><code>  
  53. UL   
  54.   - LI   
  55.      - A   
  56.    - SPAN   
  57. </code></pre>  
  58. <div>  
  59.  <ul>  
  60.   <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>  
  61.   <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>  
  62.  </ul>  
  63. </div>  
  64. <textarea></textarea>  
  65. <p>鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<code>mouseover</code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。</p>  
  66. <div>  
  67.  <ul>  
  68.   <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>  
  69.   <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>  
  70.  </ul>  
  71. </div>  
  72. <p>如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p>  
  73. </body>  
  74. </html>  

你可能感兴趣的:(JavaScript,xml,function,div)