This article describes the definition and usage of javascript event bubbles. 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 is now entering: ' + 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> The structure of the DOM tree is: </p> <pre><code>UL - LI - A - SPAN</code></pre> <div> <ul> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllllle</span></a> </li> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllle</span></a> </li> </ul> </div> <textarea> </textarea> <p> If the mouse enters any child element of the UL, if it does not stop bubbleing, we define the mouse hover ( <code> mouseover </code>) event from UL to SPAN. This event will rise to UL, so that there will be red edges from the element entered by the mouse to the UL element. </p> <div> <ul> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllle</span></a> </li> <li> <a href="//www.VeVB.COM/#"><span>Bubbllllllllllllllllle</span></a> </li> </ul> </div> <p> If the bubble stops, the event does not rise, and we can get the exact mouse entry element. </p> </body></html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques", and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.