1. Flux d'événement
L'ordre dans lequel l'élément HTML déclenche des événements.
2. 3. Capture d'événements L'idée de capture d'événements est que les nœuds moins spécifiques devraient recevoir des événements plus tôt, tandis que les nœuds les plus spécifiques devraient recevoir des nœuds à la fin. Le but de la capture de l'événement est de capturer l'événement avant d'atteindre la cible prédéterminée.
Flux d'événements DOM
Le flux d'événements spécifié dans le "flux d'événements de niveau DOM2" comprend trois étapes: l'étape de capture de l'événement, l'étape cible et l'étape de la bulle. La première chose qui se produit est la capture d'événements, qui offre la possibilité d'intercepter les événements. Ensuite, la cible réelle reçoit l'événement. La dernière étape est la phase de bulle, où les événements peuvent être réagis. Prendre une page HTML simple comme exemple, cliquer sur l'élément <v> déclenchera les événements dans l'ordre ci-dessous.
Dans le flux d'événements DOM, la cible réelle (élément <v>) ne reçoit pas d'événements pendant la phase de capture. Cela signifie que pendant la phase de capture, l'événement s'arrête après le document à <html> puis à <body>. L'étape suivante est l'étape "ciblée", donc l'événement se produit sur <v> et est considéré comme faisant partie de la phase de bulle dans le traitement des événements. Ensuite, la phase de bulle se produit et l'événement se propage au document.
La plupart des navigateurs qui prennent en charge le streaming des événements DOM implémentent un comportement spécifique; Même si la spécification de l'événement "niveau Dom2" nécessite clairement que l'étape de capture n'implique pas la cible de l'événement, Safari, Chrome, Firefox et Opera9.5 et déclenchera plus tard des événements sur les objets de l'événement pendant la phase de capture. En conséquence, il existe deux occasions de gérer des événements sur l'objet cible.
Arrêter les événements des bulles
expérience
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> </ title> <script type = "text / javascript"> function onBtn () {alert ('bouton'); // ansemberbubble (); Empêchez les bulles d'événements} // obtenez une fonction d'objet d'événement getEvent () {// si c'est IE ou chromeif (window.event) {return window.event;} // pour firefoxfunc = getEvent.Caller; // Obtenez l'appelant de fonction while (func! = null) {var arg0 = func.Arguments [0]; // Obtenez le premier paramètre de l'appelant // juger si le paramètre est vide si (arg0) {// juge si Arg0 est un objet d'événement si ((arg0.constructor == événement || arg0.constructor == Mouseevent || arg0.constructor == keyboardEvent) || (typeof (arg0) == "objet" && arg0.preventDefaul arg0.stoppropagation)) {return arg0; }} // Get func appelant func = func.Caller;} return null;} // Block Event Bubbles Fonction annuleBubble () {event = getEvent (); // Firefox Chrome if (event.PreventDefault) {event.PreventDefault (); event.stoppropagation (); } else {// ie event.cancelbubble = true; event.ReturnValue = false; }} </ script> </ head> <body onclick = "alert ('body')"> <div onclick = "alert ('div');" Style = "Background-Color: Green"> <Button onClick = "onBtn ()"> dsd </utton> </div> </ body> </html>Le code HTML ci-dessus est exécuté dans l'ordre de déclenchement de l'événement.
Par défaut: 'Button' apparaîtra ---》 apparaîtra 'div' ----》 apparaîtra 'Body'
Si vous ajoutez Code CanceBubble (): seul «bouton» apparaîtra
L'article ci-dessus a une compréhension approfondie du mécanisme d'événements JS Dom. C'est tout le contenu que j'ai partagé avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.