javascript事件冒泡简单示例

本文实例讲述了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（）;elsewindow.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="http://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a></li><li> <a href="http://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a></li> </ul></div><textarea></textarea><p> 鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（ <code>mouseover </code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p><div> <ul><li> <a href="http://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a></li><li> <a href="http://www.jb51.net/#"><span>Bubbllllllllllllllle</span></a></li> </ul></div><p> 如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p> </body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。