Récemment, parce que je dois modifier le site Web tous les jours pour faire des effets spéciaux pour le site Web, j'ai regardé beaucoup d'incidents de contact JS. Je sais seulement comment en utiliser une petite partie. Parfois, c'est aussi assez chaotique lorsque je l'utilise. Maintenant, je l'ai réglé. Je le partagerai avec la plate-forme Network Wulin pour votre référence!
1. Qu'est-ce qu'un événement JavaScript?
Les événements sont le cœur battant des applications JavaScript et la colle qui colle tout ensemble. Lorsque nous avons certains types d'interactions avec les pages Web du navigateur, des événements se produisent.
Les événements peuvent cliquer sur certains contenus, passer par un élément spécifique ou appuyer sur certaines touches du clavier, et les événements peuvent également être quelque chose qui se produit dans un navigateur Web, comme un certain chargement de page Web, ou le fait de faire défiler la fenêtre ou de modifier la taille de la fenêtre. Pour le dire franchement, les événements sont des moments d'interaction spécifiques qui se produisent dans un document ou un navigateur!
En utilisant JavaScript, vous pouvez écouter des événements spécifiques et spécifier que certains événements se produisent en réponse à eux.
2. Flux d'événements
Le flux d'événements décrit l'ordre des événements acceptés dans la page. Dans les premiers stades du développement du navigateur, deux principaux fabricants de navigateurs, c'est-à-dire et Netscape, se sont battus, et une situation de tricherie s'est produite, c'est-à-dire que leur interprétation du flux d'événements a montré deux définitions complètement opposées. C'est ce que nous connaissons: IE Event Bubbles, NetScape Event Capture. Prenons d'abord une photo et jetons un bref aperçu de la structure:
1. Bubbles d'événement
Les bulles d'événement signifie que l'événement est d'abord reçu par l'élément le plus spécifique (le nœud avec le niveau de nidification le plus profond du document), puis se propage étape par étape vers le nœud le moins spécifique (le document). Prenez le diagramme ci-dessus pour illustrer que lorsque vous cliquez sur la partie du texte, il est d'abord reçu par l'élément au texte, puis se propage à la fenêtre étape par étape, c'est-à-dire que le processus de 6-7-8-9-10 est exécuté.
2. Capture d'événement
La capture de l'événement signifie que l'événement est reçu pour la première fois par un nœud moins spécifique, et le nœud le plus spécifique reçoit enfin l'événement. De même, dans le modèle ci-dessus, en cliquant sur la partie du texte, il est d'abord reçu par la fenêtre, puis se propage à l'élément texte étape par étape, c'est-à-dire que le processus du 1-2-3-4-5 est exécuté.
Comment cela fonctionne-t-il dans le code? Donné plus tard!
3. Trois façons de gérer l'événement JavaScript
Lorsqu'un événement se produit, nous devons y faire face. Il existe trois façons principales de gérer les gestionnaires d'événements JavaScript:
1. Géréateur d'événements HTML
Autrement dit, nous ajoutons directement des gestionnaires d'événements au code HTML, tel que le code suivant:
<input id = "btn" value = "bouton" type = "bouton" onClick = "showmsg ();"> <cript> function showmsg () {alert ("html ajouter un traitement d'événement"); } </ script>À partir du code ci-dessus, nous pouvons voir que le traitement des événements est directement imbriqué dans les éléments. Il y a un problème avec cela: le couplage entre le code HTML et JS est trop fort. Si vous souhaitez modifier un showmsg en JS un jour, vous devez non seulement le modifier dans JS, mais également le modifier en HTML. Nous pouvons accepter une ou deux modifications, mais lorsque votre code atteint le niveau de 10 000 lignes, cela coûtera aux personnes et à l'argent pour le modifier. Par conséquent, nous ne recommandons pas cette méthode.
2. Gérélateur d'événements de niveau DOM0
Autrement dit, ajoutez un traitement d'événements à l'objet spécifié, voir le code suivant:
<input id = "btn" value = "bouton" type = "bouton"> <cript> var btn = document.getElementById ("btn"); BTN.OnClick = function () {alert ("Dom-Level Addition Event Traitement"); } btn.onclick = null; // Si vous souhaitez supprimer l'événement de clic de BTN, définissez-le sur null </cript>D'après le code ci-dessus, nous pouvons voir que le couplage entre les événements de niveau DOM0, le code HTML et le code JS a été considérablement réduit par rapport aux gestionnaires d'événements HTML. Cependant, les programmeurs intelligents ne sont toujours pas satisfaits et espèrent trouver un moyen plus simple d'y faire face. Jetons un coup d'œil à la troisième méthode.
3. Gérélateur d'événements de niveau DOM2
DOM2 ajoute également des gestionnaires d'événements à des objets spécifiques, mais il implique principalement deux méthodes, qui sont utilisées pour gérer les opérations de spécification et de suppression des gestionnaires d'événements: AdVEventListener () et RemoveEventListener (). Ils reçoivent tous trois paramètres: le nom de l'événement à traiter, la fonction en tant que gestionnaire d'événements et une valeur booléenne (si l'événement est traité dans l'étape de capture), voir le code suivant:
<input id = "btn" value = "bouton" type = "bouton"> <cript> var btn = document.getElementById ("btn"); btn.addeventListener ("cliquez", showmsg, false); // Nous avons établi la dernière valeur sur false, c'est-à-dire qu'elle n'est pas traitée dans l'étape de capture. D'une manière générale, le traitement des bulles est plus compatible dans chaque fonction de navigateur showmsg () {alert ("Dom-Level Add Event Handler"); } btn.reMoveEventListener ("cliquez", showmsg, false); // Si vous souhaitez supprimer cet événement, vous n'avez qu'à passer le même paramètre </cript>Ici, nous pouvons voir qu'en ajoutant et en supprimant les événements, la dernière méthode est plus directe et plus simple. Cependant, Ma Haixiang rappelle à tout le monde que lors du traitement de l'événement de suppression, les paramètres passés doivent être cohérents avec les paramètres précédents, sinon la suppression ne sera pas valide!
4. Le processus et la différence entre les bulles d'événements et la capture d'événements
Cela dit, permettez-moi de vous donner du code pour expliquer le processus de bulles d'événements et de capture d'événements, et en même temps vous permettez de voir la différence entre les deux:
<! doctype html> <html lang = "en"> <éad> <meta charset = "utf -"> <itle> Document </Title> <style> #p {width: px; height: px; border: px solide solid;} #c #c {width: px; height: px; border: px solid red;} </yle www.mahaixiang.cn <div id = "c"> J'aime www.mahaixiang.cn </div> </div> <prissle> var p = document.getElementById ('p'); var c = document.getElementById ('c'); c.AdDeventListener ('click', function () {alert ('child nœud capture')}, true); c.AdDeventListener ('Click', function () {alert ('Child Node Bubbles')}, false); P.AdDeventListener ('Click', function () {alert ('Child Node Bubbles')}, false); </cript> </ body> </html>Lorsque vous exécutez le code ci-dessus et en cliquant sur l'élément enfant, nous constaterons que l'ordre d'exécution est: Node du nœud parent Capture-Child Node Capture-Child Node Bubble Parent Node Bubble. À partir de cet exemple, nous pouvons comprendre que, en outre, l'événement Dom2 Level stipule que les événements incluent trois étapes:
1. Étape de capture d'événements;
2. Au stade cible;
3. La scène de la bulle d'événement.
Tout d'abord, c'est la capture, puis dans le stade cible (c'est-à-dire à l'endroit où l'événement est émis), et enfin il est bouillonnant. Ce qui n'est pas scientifique, c'est qu'il n'y a pas de programme de gestion des événements de niveau DOM1. Veuillez faire attention et arrêter de faire des blagues!
5. Supplément
1. Le gestionnaire d'événements IE a également deux méthodes: attachEvent () ajoute des événements et Deteachevent () supprime les événements. Ces deux méthodes reçoivent les deux mêmes paramètres: le nom du gestionnaire d'événements et la fonction de traitement des transactions. Pourquoi n'y a-t-il pas de valeur booléenne ici? Parce que les versions IE8 et antérieures ne prennent en charge que les bulles d'événements, le dernier paramètre équivaut à false par défaut à gérer! (Les navigateurs qui prennent en charge les gestionnaires d'événements IE incluent IE, Opera).
2. Une fois que toutes les fonctions de gestionnaire d'événements sont exécutées, l'objet événement est détruit!
Ce qui précède est le moyen de gérer les événements JavaScript (trois types) présentés par l'éditeur. J'espère que cela vous sera utile!