JavaScript 的事件冒泡 demo 示例

发布时间：2018-08-16 02:54:04 所属栏目：交互来源：站长网

导读：Java Script 的事件冒泡 demo 示例，如果你还不理解JavaScript的事件冒泡往下看：示例代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/x

　　JavaScript 的事件冒泡 demo 示例，如果你还不理解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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：鹰潭站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!