本文實例講述了javascript事件冒泡的定義與用法。分享給大家供大家參考，具體如下：
<!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</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="//www.VeVB.COm/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="//www.VeVB.COm/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <textarea> </textarea> <p> 鼠標進入UL的任何一個子元素，如果不停止冒泡，我們從UL到SPAN都定義了鼠標懸停（ <code> mouseover </code>）事件，這個事件會上升了UL，從而從鼠標所進入的元素到UL元素都會有紅色的邊。 </p> <div> <ul> <li> <a href="//www.VeVB.COm/#"><span>Bubbllllllllllllllle</span></a> </li> <li> <a href="//www.VeVB.COm/#"><span>Bubbllllllllllllllle</span></a> </li> </ul> </div> <p> 如果停止冒泡，事件不會上升，我們就可以獲取精確的鼠標進入元素。 </p> </body></html>更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍曆算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。