Este artigo descreve a definição e o uso das bolhas de eventos JavaScript. Compartilhe -o para sua referência, como segue:
<! xmlns = "http://www.w3.org/1999/xhtml" lang = "zh" xml: lang = "zh"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> Javascript dom </title> <style type = "text/css" media = "screen"> div * {display: block; margem: 4px; preenchimento: 4px; borda: 1px branco sólido; } textarea {width: 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 Red Solid'; log.value = 'O mouse agora entra:' + this.nodename; }; todos [i] .onMouseOut = function (e) {this.style.border = '1px sólido branco'; }; } 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 vermelho'; if (e) // Bolha de eventos de parada e.stopPropagation (); else window.event.cancelbubble = true; log.value = 'O mouse está agora entrando:' + this.nodename; }; all2 [i] .onmouseout = function (e) {this.style.border = '1px sólido branco'; }; }} window.onload = init; //]]> </script> </adhead> <body> <h1> bolha no javascript dom </h1> <p> A estrutura da árvore dom é: </p> <pre> <code> ul - li - a - span </code> </pre> <div> <ul> <li> <a href = "// www.vevb.com/#"> <pan> bubbllllllllllllllllle </span> </a> </li> <li> <a href = "// www.Vevb.com/#"> <span> bubblllllllllllllle </span> </a> Se o mouse entrar em algum elemento filho do UL, se não parar de borbulhar, definimos o evento do mouse (<code> mouseOver </code>) de UL para span. Este evento aumentará para a UL, para que haja bordas vermelhas do elemento inserido pelo mouse para o 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> Se a bolha parar, o evento não aumentará e podemos obter o elemento de entrada exato do 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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.