Analyse de addEventListener() et removeEventListener() en js

Cet article présente principalement addEventListener() et removeEventListener() en détail, qui sont utilisés pour gérer les opérations de spécification et de suppression des gestionnaires d'événements. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

addEventListener. () et removeEventListener() sont utilisés pour gérer la spécification et la suppression des opérations du gestionnaire d'événements.
Tous les nœuds DOM contiennent ces deux méthodes, et ils acceptent tous deux 3 paramètres : le nom de l'événement à traiter, la fonction de gestionnaire d'événement et une valeur booléenne.

Le dernier paramètre booléen est vrai, ce qui signifie que le gestionnaire d'événements est appelé dans la phase de capture
s'il est faux (faux par défaut), cela signifie que le gestionnaire d'événements est appelé dans la phase de capture ; phase bouillonnante.

addEventListener a trois paramètres au total. La syntaxe est la suivante :
element.addEventListener(type, Listener, useCapture)

Ce qui suit est le détail. explication :
1. L'élément est l'objet auquel la fonction est liée.
2. Type est le nom de l'événement. Il convient de noter que "onclick" doit être remplacé par "click" et "onblur" doit être remplacé par "blur", ce qui signifie que le nom de l'événement ne doit pas contenir "on". .
3. L'écouteur est bien sûr une fonction liée. N'oubliez pas de ne pas suivre les parenthèses.
4. Le dernier paramètre est une valeur booléenne, indiquant la séquence de réponse de l'événement. utiliserCapture ).

Pour ajouter un gestionnaire d'événements pour l'événement de clic sur un bouton, vous pouvez utiliser le code suivant :

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);

Ajouter un gestionnaire d'événements en utilisant le niveau DOM2 méthode Le principal avantage est que vous pouvez ajouter plusieurs gestionnaires d'événements. Prenons l'exemple suivant :

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert(this.id);
}, false);  
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

Les gestionnaires d'événements ajoutés via addEventListener() ne peuvent être supprimés qu'en utilisant removeEventListener();

move Les paramètres transmis lors de la division sont les mêmes que ceux utilisés lors de l’ajout du gestionnaire.
Cela signifie également que les fonctions anonymes ajoutées via addEventListener() ne peuvent pas être supprimées, comme le montre l'exemple suivant :

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
   alert(this.id);
}, false);

Dans dans cet exemple, j'ajoute un gestionnaire d'événements en utilisant addEventListener().
Bien que l'appel de removeEventListener semble utiliser les mêmes paramètres
, en fait, le deuxième paramètre est une fonction complètement différente de celle passée dans addEventListener().
La fonction de gestionnaire d'événements transmise dans removeEventListener() doit être la même que celle transmise dans addEventListener(),

Comme le montre l'exemple suivant :

var btn = document.getElementById("myBtn");
var handler = function () {
   alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！

Il n'y a aucun problème avec cet exemple réécrit car la même fonction est utilisée dans addEventListener() et removeEventListener().
Le résultat expérimental est que lorsque l'utilisateur clique sur le bouton, "J'ai été cliqué !" sera affiché à chaque fois, indiquant que la fonction removeEventListener() ne fonctionne pas.

Tirez des conclusions en recherchant des informations. Lors de l'utilisation de la fonction removeEventListener(), la fonction de gestionnaire doit être la même que la fonction de gestionnaire dans addEventListener().

Le code écrit ci-dessus est donc faux. Le code corrigé devrait être le suivant :

//addEventListener()和removeEventListener()中handler函数必须相同，移除事件函数才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效！

Les étudiants qui ont besoin d'apprendre js, veuillez faire attention au site Web php chinois tutoriel vidéo js, de nombreux js didacticiels vidéo en ligne C'est gratuit à regarder !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!