EventTarget : mthode removeEventListener()

Syntaxe

removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)

Paramtres

type

Chane de caractres qui prcise le type d'vnement pour lequel supprimer un couteur.

listener

La fonction couteur d'vnement supprimer de la cible.

options Facultatif

Objet d'options qui prcise les caractristiques de l'couteur d'vnement.

Les options disponibles sont :

• capture : Boolen qui indique si l'couteur d'vnement supprimer a t enregistr en mode capture ou non. Si ce paramtre est absent, la valeur par dfaut est false.

useCapture Facultatif

Boolen qui indique si l'couteur d'vnement supprimer a t enregistr en mode capture ou non. Si ce paramtre est absent, la valeur par dfaut est false.

Valeur de retour

Aucune (undefined).

Correspondance des couteurs supprimer

Lorsqu'un couteur d'vnement a t ajout avec addEventListener(), il peut arriver que vous deviez le supprimer. Il faut alors spcifier les mmes paramtres type et listener removeEventListener(). Mais qu'en est-il des paramtres options ou useCapture ?

Bien que addEventListener() permette d'ajouter plusieurs fois le mme couteur pour un mme type si les options diffrent, la seule option prise en compte par removeEventListener() est le drapeau capture/useCapture. Sa valeur doit correspondre pour que la suppression fonctionne, les autres options n'ont pas d'importance.

Par exemple :

element.addEventListener("mousedown", handleMouseDown, true);

Considrez ces deux appels removeEventListener() :

element.removeEventListener("mousedown", handleMouseDown, false); // chec
element.removeEventListener("mousedown", handleMouseDown, true); // Succs

Le premier choue car la valeur de useCapture ne correspond pas. Le second russit car la valeur correspond.

Autre exemple :

element.addEventListener("mousedown", handleMouseDown, { passive: true });

Ici, on spcifie un objet d'options o passive vaut true, les autres options restant false par dfaut.

Considrez ces appels removeEventListener() : tous ceux o capture ou useCapture vaut true chouent ; les autres russissent.

Seule l'option capture compte pour removeEventListener().

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succs
element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succs
element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // chec
element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succs
element.removeEventListener("mousedown", handleMouseDown, false); // Succs
element.removeEventListener("mousedown", handleMouseDown, true); // chec

noter : certains navigateurs ont pu tre incohrents sur ce point. Sauf raison particulire, il est conseill d'utiliser les mmes valeurs que lors de l'appel addEventListener().

Exemple

Cet exemple montre comment ajouter un couteur d'vnement bas sur mouseover qui supprime un couteur bas sur click.

const body = document.querySelector("body");
const clickTarget = document.getElementById("click-target");
const mouseOverTarget = document.getElementById("mouse-over-target");

let toggle = false;
function makeBackgroundYellow() {
  body.style.backgroundColor = toggle ? "white" : "yellow";

  toggle = !toggle;
}

clickTarget.addEventListener("click", makeBackgroundYellow);

mouseOverTarget.addEventListener("mouseover", () => {
  clickTarget.removeEventListener("click", makeBackgroundYellow);
});

Spcifications

Compatibilit des navigateurs

Voir aussi

• EventTarget.addEventListener()