web-dev-qa-db-fra.com

Comment ajouter et supprimer un écouteur d'événements à l'aide d'une fonction avec des paramètres?

Désolé s'il s'agit d'une question courante, mais je n'ai pas trouvé de réponses qui semblaient pertinentes lors de la recherche.

Si j'attache un écouteur d'événement comme celui-ci:

window.addEventListener('scroll', function() { check_pos(box); }, false);

il ne semble pas fonctionner d'essayer de le supprimer plus tard, comme ceci:

window.removeEventListener('scroll', function() { check_pos(box); }, false);

Je suppose que c'est parce que les méthodes addEventListener et removeEventListener veulent une référence à la même fonction, alors que je leur ai fourni des fonctions anonymes, qui, bien que identiques dans le code, ne sont pas littéralement les mêmes .

Comment puis-je changer mon code pour que l'appel à removeEventListener fonctionne? L'argument "box" fait référence au nom d'un <iframe> Que je suis en train de suivre à l'écran; c'est-à-dire que je veux pouvoir m'abonner à l'événement scroll une fois pour chaque <iframe> que j'ai (la quantité varie), et une fois que la fonction check_pos() mesure un certaine position, il appellera une autre fonction et supprimera également l'écouteur d'événements pour libérer des ressources système.

Mon intuition est que la solution impliquera une fermeture et/ou la dénomination de la fonction anonyme, mais je ne sais pas exactement à quoi cela ressemble et j'apprécierais un exemple concret.

J'espère que cela a du sens.

javascripteventsevent-handlingaddeventlistenerdom-events
27
Bungle

Avez-vous essayé de conserver une référence à la fonction anonyme (comme vous l'avez suggéré)?

Alors:

var listener = function() {
  check_pos(box);
};

window.addEventListener('scroll', listener, false);
...
window.removeEventListener('scroll', listener, false);

Les documents de Mozilla suggérer la même chose.

19
Vivin Paliath
var listener;

listener = function(){

if( window.target != anotherEvent.target )
{
    ...CODE where

    window.removeEventListener('click', listener , false);

};

window.addEventListener('click', listener ,false);
3
Rodrigo
document.getElementById("yourId").removeEventListener("click",yourfunction1);
document.getElementById("yourId").addEventListener("click",yourfunction2);

function yourfunction1(){
//write code here
alert(1);
}

function yourfunction2(){
//write code here
alert(2);
}
<button type="button" onclick="yourfunction1()" id="yourId">Button</button>
0
Bala visakh