Of Stack

Simple example of javascript event bubble

  • 2021-06-29 09:43:23
  • OfStack

The definition and usage of javascript event bubbles are illustrated with examples.Share it for your reference, as follows: 


<!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 = ' The mouse now enters:  ' + 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) // Stop Event Bubble 
       e.stopPropagation();
      else 
       window.event.cancelBubble = true;
      log.value = ' The mouse now enters:  ' + 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 The structure of the tree is: 
  </p>
  <pre><code>
UL
 - LI
  - A
 - SPAN
</code></pre>
  <div>
   <ul>
    <li>
     <a href="https://www.ofstack.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
    <li>
     <a href="https://www.ofstack.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
   </ul>
  </div>
  <textarea>
  </textarea>
  <p>
    Mouse Entry UL Any 1 Child elements, if we don't stop bubbling, we start with UL reach SPAN Both define mouse hover ( 
   <code>
    mouseover
   </code> ) Event, this event will rise UL From the elements that the mouse enters to UL All elements have red edges. 
  </p>
  <div>
   <ul>
    <li>
     <a href="https://www.ofstack.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
    <li>
     <a href="https://www.ofstack.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
   </ul>
  </div>
  <p>
    If you stop the bubbling and the event does not go up, we can get a precise mouse entry into the element. 
  </p>
 </body>
</html>

More readers interested in JavaScript related content can view this site's topics: JavaScript Switching Special Effects and Techniques Summary, JavaScript Finding Algorithmic Techniques Summary, JavaScript Animation Special Effects and Techniques Summary, JavaScript Errors and Debugging Techniques Summary, JavaScript Data Structure and Algorithmic Techniques Summary,Summary of JavaScript Traversal Algorithms and Techniques and Summary of JavaScript Mathematical Operation Usage

I hope that the description in this paper will be helpful to everyone's JavaScript program design.

Related articles: