Lectures connexes:
JavaScript Event Learning Résumé (V) Type d'événement de souris en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Résumé (i) Flux d'événements
//www.vevb.com/article/86261.htm
JavaScript Event Learning Résumé (iv) Membres publics de l'événement (propriétés et méthodes)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Résumé (ii) JS Événements JS
//www.vevb.com/article/86264.htm
JavaScript Event Learning Résumé (III) Objet de l'événement JS
1. Événements
Un événement est une certaine action effectuée par l'utilisateur ou le navigateur lui-même, comme Click, Load et Mouseover sont tous les noms de l'événement.
Les événements sont le pont entre JavaScript et DOM.
Si vous déclenchez, je vais exécuter l'événement et appeler sa fonction de traitement pour exécuter le code JavaScript correspondant pour donner la réponse.
Les exemples typiques sont les suivants: l'événement de charge est déclenché après le chargement de la page; L'utilisateur clique sur l'élément et déclenche l'événement de clic.
2. Flux d'événements
1. Conscience de la grippe des événements
Question: Cliquez sur l'élément de page, quel type d'élément peut ressentir un tel événement?
Réponse: En cliquant sur un élément, vous cliquez également sur l'élément de conteneur de l'élément, ou même sur la page entière.
Exemple: il y a trois cercles concentriques, ajoutez la fonction de gestion des événements correspondante à chaque cercle et le texte correspondant apparaît. Cliquez sur le cercle le plus intérieur et cliquez également sur le cercle extérieur, afin que l'événement de clic du cercle extérieur soit également déclenché.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <t titre> </tapie> </ad> <style> #outer {position: absolue; Largeur: 400px; hauteur: 400px; en haut: 0; à gauche: 0; en bas: 0; à droite: 0; marge: auto; Color en arrière-plan: Deeppink; } #middle {position: absolue; Largeur: 300px; hauteur: 300px; en haut: 50%; marge-gauche: -150px; marge: -150px; Color en arrière-plan: DeepskyBlue; } #inner {position: absolue; Largeur: 100px; hauteur: 100px; en haut: 50%; Gauche: 50%; marge-gauche: -50px; marge: -50px; Color d'arrière-plan: DarkGreen; Texte-aligne: Centre; hauteur de ligne: 100px; Couleur: blanc; } # exter, # middle, # Inner {Border-Radius: 100%; } </ style> <body> <div id = "exter"> <div id = "middle"> <div id = "Inner"> cliquez sur moi! </div> </div> </div> <cript> var innerCircle = document.getElementById ("Inner"); innerCircle.OnClick = function () {alert ("InnerCircle"); }; var middlecircle = document.getElementById ("middle"); middlecircle.onclick = function () {alert ("middlecircle"); } var exterCircle = document.getElementById ("exter"); outerCircle.OnClick = function () {alert ("OuterCircle"); } </ script> </ body> </html>Les effets sont les suivants:
2. Flux d'événements
Lorsqu'un événement se produit, il se propage dans un ordre spécifique entre le nœud d'élément et le nœud racine. Tous les nœuds passant par le chemin recevront l'événement. Ce processus de propagation est le flux d'événements DOM.
L'ordre de propagation des événements correspond aux deux modèles de flux d'événements du navigateur: capturez le flux d'événements et le flux d'événements à bulles.
Bubble Event Stream: la propagation des événements est de la cible d'événement la plus spécifique à la cible d'événement la moins spécifique. C'est-à-dire des feuilles de l'arbre Dom à la racine.
Stream d'événements capturé: la propagation des événements est de la cible d'événement la moins spécifique à l'objectif d'événement le plus spécifique. C'est-à-dire des racines de l'arbre Dom aux feuilles.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <t titre> </ title> </ head> <body> <div id = "myDiv"> Cliquez moi! </div> </ body> </html>
Dans le code HTML ci-dessus, cliquez sur l'élément <div> de la page.
Dans le flux d'événements de bouillonnement, cliquez sur l'ordre de propagation des événements est <v> -》 <body> -》》 <html> -》》 Document
Dans le flux d'événements capturé, cliquez sur l'ordre de propagation des événements est un document -》 <html> -》 <body> -》》 <div>
note:
1) Tous les navigateurs modernes prennent en charge les bulles d'événements, mais il existe de légères différences dans des implémentations spécifiques:
Dans IE5.5 et plus tôt, les bulles d'événements sauteront l'élément <html> (sautez directement du corps en document).
IE9, Firefox, Chrome et Safari Bubble Bubble jusqu'à l'objet Window.
2) IE9, Firefox, Chrome, Opera et Safari Tous soutiennent la capture des événements. Bien que la norme DOM nécessite que les événements soient propagés à partir d'objets de document, ces navigateurs commencent à capturer des événements à partir d'objets Window.
3) Étant donné que les vieux navigateurs ne le soutiennent pas, peu de gens utilisent la capture d'événements. Il est recommandé d'utiliser des bulles d'événements.
Flux d'événements DOM
La norme DOM utilise Capture + Bubbling. Les deux flux d'événements déclenchent tous les objets du DOM, en commençant par l'objet de document et en se terminant par l'objet document.
La norme DOM stipule que le flux d'événements comprend trois étapes: étape de capture d'événements, étape cible et étape de la bulle d'événements.
Phase de capture de l'événement: la cible réelle (<v>) ne recevra pas d'événements pendant la phase de capture. Autrement dit, dans la phase de capture, l'événement s'arrête de document à <html> puis à <body>. Dans l'image ci-dessus, il est 1 ~ 3.
Au stade cible: l'événement se produit et est traité sur <v>. Mais le traitement des événements sera considéré comme faisant partie de la phase bouillonnante.
Phase de bulle: les événements se propagent au document.
note:
1): La norme DOM stipule que la capture de phase de capture d'événements implique des cibles d'événements, mais les événements sur les objets d'événement seront définis dans IE9, Safari, Chrome, Firefox, Opera9.5 et les versions ultérieures commenceront les événements sur les objets d'événement pendant la phase de capture. En conséquence, il existe deux occasions de gérer des événements sur l'objet cible.
2): Tous les événements ne passent pas par le stade de la bulle. Tous les événements passent par l'étape de capture et sont dans le stade cible, mais certains événements ignorent l'étape de la bulle: par exemple, l'événement de mise au point qui obtient la mise au point des entrées et l'événement Blur qui perd la mise au point des entrées.
Exemple de deux chances d'exploiter les événements sur l'objet cible:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <t titre> </tapie> </ad> <style> #outer {position: absolue; Largeur: 400px; hauteur: 400px; en haut: 0; à gauche: 0; en bas: 0; à droite: 0; marge: auto; Color en arrière-plan: Deeppink; } #middle {position: absolue; Largeur: 300px; hauteur: 300px; en haut: 50%; marge-gauche: -150px; marge: -150px; Color en arrière-plan: DeepskyBlue; } #inner {position: absolue; Largeur: 100px; hauteur: 100px; en haut: 50%; Gauche: 50%; marge-gauche: -50px; marge: -50px; Color d'arrière-plan: DarkGreen; Texte-aligne: Centre; hauteur de ligne: 100px; Couleur: blanc; } # exter, # middle, # Inner {Border-Radius: 100%; } </ style> <body> <div id = "exter"> <div id = "middle"> <div id = "Inner"> cliquez sur moi! </div> </div> </div> <cript> var innerCircle = document.getElementById ("Inner"); InnerCircle.AdDeventListener ("cliquez", fonction () {alert ("L'événement de clic d'InnerCircle est tiré dans l'étape de capture");}, true); innercircle.addeventListener ("cliquez", function () {alert ("L'événement de clic d'InnerCircle est tiré dans l'étape de la bulle");}, false); var middlecircle = document.getElementById ("middle"); middlecircle.addeventListener ("cliquez", fonction () {alert ("L'événement de clic de MiddleCircle est tiré dans l'étape de capture");}, true); middlecircle.addeventListener ("cliquez", fonction () {alert ("L'événement de clic de MiddleCircle est tiré dans l'étape de la bulle");}, false); var outerCircle = document.getElementById ("exter"); outerCircle.addeventListener ("cliquez", fonction () {alert ("L'événement de clic d'OUTERCIRCLE est tiré dans l'étape de capture");}, true); OUTERCIRCLE.ADDEventListener ("Click", Function () {alert ("L'événement de clic d'OUTERCIRCLE est tiré dans l'étape de la bulle");}, false); </cript> </ body> </html>L'effet de fonctionnement est que 6 boîtes apparaîtront les unes après les autres. Pour expliquer le principe, je l'ai intégré à une image:
3. Application typique du flux d'événements - Proxy d'événements
Dans le traitement des événements traditionnels, un gestionnaire d'événements doit être ajouté à chaque élément. JS Event Proxy est une technique simple et efficace, à travers laquelle vous pouvez ajouter le processeur d'événements à un élément parent, évitant ainsi d'ajouter le processeur d'événements à plusieurs éléments enfants.
Le principe du proxy d'événements utilise des bulles d'événements et des éléments cibles, ajouter le processeur d'événements à l'élément parent, attendre que l'élément enfant bubble les événements et l'élément parent peut déterminer quel élément enfant est via la cible (c'est-à-dire Srcelement), et ainsi effectuer un traitement correspondant. Pour plus de contenu sur Target, veuillez vous référer aux exemples suivants pour les membres publics (propriétés et méthodes) de l'événement (iv) pour les exemples suivants.
Traitement des événements traditionnels, ajoutant un gestionnaire d'événements à chaque élément, le code est le suivant:
<body> <ul id = "Color-list"> <li> Red </li> <li> orange </li> <li> Jaune </li> <li> vert </li> <li> bleu </li> <li> Indigo </li> <li> Purple </li> </ul> </ulst> (function () {varList = document.getelementById ("Color-List"); ColorS = Colorlist.getElementsByTagName ("Li"); }}) (); </cript> </ body>La méthode de traitement de l'agent d'événement est la suivante:
<body> <ul id = "Color-list"> <li> Red </li> <li> Orange </li> <li> Jaune </li> <li> vert </li> <li> bleu </li> <li> Indigo </li> <li> Purple </li> </ul> <prict> (function () {varList = document.getelementById ("Color-List"); ColorList.AddeventListener (Click ', Showcolor, False);Pour résumer les avantages du proxy d'événements:
un. Réduisez plusieurs processeurs d'événements à un, car le processeur d'événements doit résider dans la mémoire, ce qui améliore les performances. Imaginez s'il y a une table à 100 rangs, en comparant la façon traditionnelle de lier les gestionnaires d'événements pour chaque cellule avec un proxy d'événements (c'est-à-dire l'ajout d'un gestionnaire d'événements à la table), il n'est pas difficile de conclure que le proxy d'événements évite certains risques potentiels et améliore les performances.
né La mise à jour DOM ne nécessite pas de référence au processeur d'événements, car le proxy d'événements peut adopter différentes méthodes de traitement pour différents éléments enfants. Si d'autres éléments enfants (A, Span, Div, etc.) sont ajoutés, vous pouvez modifier directement la fonction de gestionnaire d'événements de l'agent d'événement. Il n'est pas nécessaire de relire le processeur et pas besoin de boucler à nouveau.
Ce qui précède est le résumé d'apprentissage des événements JavaScript (i) les connaissances liées sur le streaming des événements que l'éditeur vous a présenté. J'espère que ce sera utile à tous!