javascript事件冒泡简单示例

2019-11-20 09:39:13

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS实现鼠标框选效果完整实例

下一篇：JS实现的打字机效果完整实例