В этой статье описывается определение и использование пузырьков событий 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"/> name = "developer" content "/nationazy"/"content"/"content"/"content"/"content"/"content"/"content"/"content"/"content"/"content"/"content"/"content"/html; harset = utf-8 "/" intemble inte inte vatue in "/html; Javascript dom </title> <style type = "text/css" media = "screen"> div * {display: block; Маржа: 4px; Заполнение: 4px; Граница: 1px сплошной белый; } textarea {width: 20ем; высота: 2ем; } </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 сплошной белый'; }; } 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 твердый красный'; if (e) // Остановить пузырь событий e.stoppropagation (); else window.event.cancelbubble = true; log.value = 'Мышь сейчас вводит:' + this.nodename; }; all2 [i] .onmouseout = function (e) {this.style.border = '1px сплошной белый'; }; }} window.onload = init; //]]>> </script> </head> <body> <h1> пузырь в javascript dom </h1> <p> Структура дерева DOM: </p> <pre> <code> ul - li - a - span> </pre> <div> <ul> <li> <a href = "// www.vevb.com/#"> <pan> bubbllllllllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com/#"> <pan> bubbllllllllllllllllle </span> </a> </li> </ul> </diveea> </diveea> </diveea> Если мышь входит в какой -либо дочерний элемент UL, если она не останавливает пузырьки, мы определяем событие мыши Hover (<cod> MouseOver </code>) от UL до SPAN. Это событие поднимется до UL, так что появятся красные края от элемента, введенного мышью в элемент 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> Если пузырь останавливается, событие не поднимается, и мы можем получить точный элемент входа мыши. </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 »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.