Cet article décrit la définition et l'utilisation des bulles d'événements JavaScript. Partagez-le pour votre référence, comme suit:
<! 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"> <Aad> <Meta Http-Equiv = "Content-Type" Content = "Text / Html; CARSTET = UTF-8" /> <Meta Name = "Development" Contenty "Contenu =" REALAZ JavaScript Dom </ Title> <style type = "Text / CSS" Media = "Screen"> Div * {Affichage: Block; marge: 4px; rembourrage: 4px; Border: 1px blanc solide; } textarea {width: 20em; hauteur: 2em; } </ style> <script type = "text / javascript"> // <! [cdata [fonction init () {var log = document.getElementsByTagName ('textarea') [0]; var all = document.getElementsByTAGName ('div') [0] .getElementsByTagName ('*'); pour (var i = 0, n = all.length; i <n; ++ i) {all [i] .onMouseOver = function (e) {this.style.border = '1px solide rouge'; log.value = 'La souris entre maintenant:' + this.NodeName; }; tout [i] .onMouseout = fonction (e) {this.style.borter = '1px solid blanc'; }; } var all2 = document.getElementsByTAGName ('div') [1] .getElementsByTagName ('*'); pour (var i = 0, n = all2.length; i <n; ++ i) {all2 [i] .onMouseOver = function (e) {this.style.border = '1px solide rouge'; if (e) // stop event bubble e.stoppropagation (); else window.event.cancelbubble = true; log.value = 'La souris entre maintenant:' + this.NodeName; }; all2 [i] .onMouseout = function (e) {this.style.border = '1px solide blanc'; }; }} window.onload = init; //]]> </ script> </ head> <body> <h1> bulle dans javascript Dom </h1> <p> La structure de l'arborescence Dom est: </p> <pre> <code> ul - li - a - span </code> </ Pre> <div> <ul> <li> <a href = "// www.vevb.com / #"> <span> bubbllllllllllllllllle </ span> </a> </li> <li> <a href = "// www.vevb.com / #"> <span> bubblllllllllllllle </span> </a> </li> </ul> </ul> Si la souris pénètre dans un élément enfant de l'UL, s'il n'arrête pas de bubbleing, nous définissons l'événement de survol de la souris (<code> Mouseover </code>) d'UL à Span. Cet événement passera à UL, de sorte qu'il y aura des bords rouges de l'élément entré par la souris à l'élément UL. </p> <div> <ul> <li> <a href = "// www.vevb.com / #"> <span> bubbllllllllllllle </span> </a> </li> <li> <a href = "// www.vevb.com / #"> <span> </frlllllllllle </pannet> </a> <pan> </ ullllllllle </panneuse <p> Si la bulle s'arrête, l'événement ne monte pas et nous pouvons obtenir l'élément d'entrée de la souris exact. </p> </ body> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.