作者:Realazy 时间: 2007-04-10 文档类型:转载 来自:Realazy
如果你还不理解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="#"><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> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
出处:Realazy 责任编辑:moby
◎进入论坛网页制作、网站综合版块参加讨论
蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。
特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。