Méthodes de gestion des événements JavaScript (trois types)_compétences Javascript

Récemment, parce que je dois modifier le site Web tous les jours et faire des effets spéciaux pour le site Web, j'ai vu beaucoup d'événements d'exposition js, je n'en utilise qu'une petite partie. Parfois, c'est déroutant lorsque je l'utilise. Maintenant, je l'ai trié systématiquement. Partagez-le sur la plateforme Script House 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 le ciment qui maintient tout ensemble. Les événements se produisent lorsque nous effectuons certains types d'interactions avec des pages Web dans le navigateur.

L'événement peut être l'utilisateur cliquant sur un contenu, la souris passant sur un élément spécifique ou appuyant sur certaines touches du clavier. L'événement peut également être quelque chose qui se produit dans le navigateur Web, comme le chargement d'une page Web. ou l'utilisateur fait défiler ou redimensionne la fenêtre. Pour parler franchement, un événement est un moment précis d’interaction qui se produit dans un document ou un navigateur !

En utilisant JavaScript, vous pouvez écouter des événements spécifiques qui se produisent et spécifier que certains événements se produisent en réponse à ces événements.

2. Flux d'événements

Le flux d'événements décrit l'ordre dans lequel les événements sont reçus sur une page. Au début du développement des navigateurs, les deux principaux fabricants de navigateurs, IE et Netscape, étaient en concurrence, et un piège s'est produit, c'est-à-dire leur interprétation de. le flux d’événements a émergé. Deux définitions complètement opposées. C'est ce que nous connaissons : le bouillonnement d'événements d'IE, la capture d'événements de Netscape. Prenons d'abord une photo pour examiner brièvement la structure :

1. Événement bouillonnant

Le bouillonnement d'événement signifie que l'événement est initialement reçu par l'élément le plus spécifique (le nœud avec le niveau d'imbrication le plus profond dans le document), puis se propage vers le nœud le moins spécifique (document). Prenez l'image ci-dessus pour illustrer que lorsque l'on clique sur la partie du texte, elle est d'abord reçue par l'élément au niveau du texte, puis propagée étape par étape vers la fenêtre, c'est-à-dire le processus de 6-7-8-9-10. est exécuté.

2. Capture d'événement

La capture d'événement signifie que l'événement est reçu en premier par le nœud le moins spécifique, et que le nœud le plus spécifique reçoit l'événement en dernier. De même, dans le modèle ci-dessus, lorsque l'on clique sur la partie de texte, elle est d'abord reçue par la fenêtre puis propagée étape par étape à l'élément de texte, c'est-à-dire que le processus 1-2-3-4-5 est exécuté.

Comment est-ce exprimé dans le code ? Sera donné plus tard !

3. Trois façons de gérer les événements Javascript

Lorsqu'un événement se produit, nous devons le gérer. Il existe trois méthodes principales de gestionnaires d'événements Javascript :

1. Gestionnaire d'événements HTML

C'est-à-dire que nous ajoutons le gestionnaire d'événements directement dans le code HTML, comme le code suivant :

<input id="btn" value="按钮" type="button" onclick="showmsg();">
　　<script>
　　 function showmsg(){
　　 alert("HTML添加事件处理");
　　 }
　　</script> 

D'après le code ci-dessus, nous pouvons voir que le traitement des événements est directement imbriqué dans l'élément. Cela pose un problème : le couplage entre le code html et js est trop fort. Si un jour vous souhaitez changer showmsg en js, alors non. il suffit de le modifier en js, mais il faut aussi le modifier en html. Nous pouvons accepter une ou deux modifications, mais lorsque votre code atteint le niveau de 10 000 lignes, la modification demandera beaucoup de temps et d'argent, donc. nous n'utilisons pas cette méthode.

2. Gestionnaire d'événements DOM niveau 0

C'est-à-dire pour ajouter un traitement d'événement pour l'objet spécifié, regardez le morceau de code suivant :

<input id="btn" value="按钮" type="button">
　　<script>
　　　　var btn= document.getElementById("btn");
　　 btn.onclick=function(){
　　　　　　alert("DOM级添加事件处理");
　　　　} 
　　　　btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
　　</script> 

D'après le code ci-dessus, nous pouvons voir que par rapport aux gestionnaires d'événements HTML, aux événements DOM niveau 0, le couplage entre le code html et le code js a été considérablement réduit. Cependant, les programmeurs intelligents ne sont toujours pas satisfaits et espèrent trouver un moyen plus simple de résoudre ce problème. Examinons la troisième façon de résoudre ce problème.

3. Gestionnaire d'événements de niveau DOM2

DOM2 ajoute également des gestionnaires d'événements à des objets spécifiques, mais implique principalement deux méthodes pour gérer les opérations de spécification et de suppression des gestionnaires d'événements : addEventListener() et removeEventListener(). Ils reçoivent tous trois paramètres : le nom de l'événement à traiter, la fonction de gestionnaire d'événement et une valeur booléenne (si l'événement doit être géré dans la phase de capture), regardez le morceau de code suivant :

<input id="btn" value="按钮" type="button">
　　<script>
　　 var btn=document.getElementById("btn");
　　 btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处
理在各浏览器中兼容性较好
　　 function showmsg(){
　　 alert("DOM级添加事件处理程序");
　　 }
　　 btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
　　</script>

Ici, nous pouvons voir que lors de l'ajout et de la suppression du traitement d'événements, la dernière méthode est plus directe et la plus simple. Cependant, Ma Haixiang rappelle à tous que lors du traitement de l'événement de suppression, les paramètres transmis doivent être cohérents avec les paramètres précédents, sinon la suppression sera invalide !

4. Le processus et la différence entre le bouillonnement d'événement et la capture d'événement

En parlant de cela, laissez-moi vous donner un peu de code pour expliquer le processus de bouillonnement d'événements et de capture d'événements, et également vous laisser voir la différence entre les deux :

<!doctype html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-">
　　 <title>Document</title>
　　 <style>
　　 #p{width:px;height:px;border:px solid black;}
　　 #c{width:px;height:px;border:px solid red;}
　　 </style>
　　</head>
　　<body>
　　 <div id="p">
　　 i am www.mahaixiang.cn
　　 <div id="c">i like www.mahaixiang.cn</div>
　　 </div>
　　 <script>
　　 var p = document.getElementById('p');
　　 　　var c = document.getElementById('c');
　　 c.addEventListener('click', function () {
　　 alert('子节点捕获')
　　 }, true);
　　 c.addEventListener('click', function () {
　　 alert('子节点冒泡')
　　 }, false);
　　 p.addEventListener('click', function () {
　　 alert('父节点捕获')
　　 }, true);
　　 p.addEventListener('click', function () {
　　 alert('父节点冒泡')
　　 }, false);
　　 </script>
　　</body>
</html> 

Exécutez le code ci-dessus et cliquez sur l'élément enfant. Nous constaterons que l'ordre d'exécution est : capture du nœud parent - capture du nœud enfant - nœud enfant bouillonnant - nœud parent bouillonnant. A partir de cet exemple, tout le monde comprendra. De plus, les événements DOM niveau 2 stipulent que les événements comprennent trois étapes :

1. Phase de capture d'événement;

2. Au stade cible

3. Étape bouillonnante événementielle.

D'abord, il capture, puis il est au stade cible (c'est-à-dire lorsqu'il s'agit de l'endroit où l'événement est envoyé), et enfin il bouillonne. Ce qui n'est pas scientifique, c'est qu'il n'y a pas de gestionnaire d'événements de niveau DOM1. . S'il vous plaît, faites attention, ne faites pas de blague !

5. Supplément

1. Le gestionnaire d'événements IE dispose également de deux méthodes : attachEvent() pour ajouter un événement et detachEvent() pour supprimer un événement. Ces deux méthodes reçoivent les deux mêmes paramètres : le nom du gestionnaire d'événements et la fonction de traitement d'événement. Pourquoi n’y a-t-il pas de valeur booléenne ici ? Étant donné qu'IE8 et les versions antérieures ne prennent en charge que le bouillonnement d'événements, le dernier paramètre est par défaut false ! (Les navigateurs prenant en charge les gestionnaires d'événements IE incluent IE et Opera).

2. L'objet événement est un objet utilisé pour enregistrer certaines informations pertinentes lorsqu'un événement se produit, mais l'objet événement n'est généré que lorsque l'événement se produit et n'est accessible que dans la fonction de traitement d'événement, après toutes les fonctions de traitement d'événement. ont fini de s'exécuter, l'objet événement est détruit !

Ci-dessus sont les méthodes de traitement des événements JavaScript (trois types) présentées par l'éditeur. J'espère que cela vous sera utile !