Este artículo describe la definición y el uso de las burbujas de eventos JavaScript. Compártelo para su referencia, como sigue:
< 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 = "desarrollador" contenido = "contenido" JavaScript DOM </title> <style type = "text/css" medios = "pantalla"> div * {display: block; margen: 4px; relleno: 4px; borde: 1px blanco sólido; } TextARea {ancho: 20em; Altura: 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 sólido rojo'; log.value = 'El mouse ahora entra:' + this.nodeName; }; all [i] .onmouseOut = function (e) {this.style.border = '1px sólido sólido'; }; } 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 sólido rojo'; if (e) // detener la burbuja de eventos E.stoppropagation (); else window.event.cancelBubble = true; log.value = 'El mouse ahora está entrando:' + this.nodeName; }; all2 [i] .onmouseout = function (e) {this.style.border = '1px sólido sólido'; }; }} window.onload = init; //]]> </script> </head> <body> <h1> burbuja en JavaScript dom </h1> <p> La estructura del árbol DOM es: </p> <pre> <code> ul - li - a - span </code> </pr> <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> </siv> <viv> <viv> Si el mouse ingresa a cualquier elemento infantil de la UL, si no deja de burbujas, definimos el evento del mouse (<code> Mouseover </code>) de UL a Span. Este evento se elevará a UL, de modo que habrá bordes rojos desde el elemento ingresado por el mouse al elemento UL. </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> Si la burbuja se detiene, el evento no se eleva y podemos obtener el elemento de entrada exacto del mouse. </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 Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.