L'ajout et la Suppression d'Écouteurs d'Événement avec des paramètres

Je suis en train d'écrire un vanille JavaScript outil, que lorsqu'elle est activée ajoute des écouteurs d'événements pour chacun des éléments passés dans celui-ci.

Je voudrais faire quelque chose comme ceci:

var do_something = function (obj) {
        //do something
    };

for (var i = 0; i < arr.length; i++) {
    arr[i].el.addEventListener('click', do_something(arr[i]));
}

Malheureusement cela ne fonctionne pas, parce que pour ce que je sais, lors de l'ajout d'un écouteur d'événement, les paramètres ne peuvent être passés dans les fonctions anonymes:

for (var i = 0; i < arr.length; i++) {
    arr[i].el.addEventListener('click', function (arr[i]) {
        //do something
    });
}

Le problème est que j'ai besoin d'être en mesure de retirer l'écouteur d'événement lorsque l'outil est désactivé, mais je ne pense pas qu'il est possible de retirer les écouteurs d'événement avec des fonctions anonymes.

for (var i = 0; i < arr.length; i++) {
    arr[i].el.removeEventListener('click', do_something);
}

Je sais que je pourrais facilement utiliser jQuery pour résoudre mon problème, mais je suis en train d'essayer de minimiser les dépendances. jQuery doit obtenir autour de cette en quelque sorte, mais le code est un peu la jungle!

Si le nom de vos auditeurs, vous pouvez utiliser removeEventListener.
Puisque vous savez jQuery peut résoudre votre problème, vous avez juste besoin de lire le code source de la façon dont il fonctionne.
+1 au moins pour les caractères gras les mots " à la vanille JavaScript, et aussi italicising votre point de vue à propos de jQuery! (J'espère que personne ne sera effectivement suggérer jQuery comme une solution maintenant...) Mais aussi +1 parce que c'est une bonne question.

OriginalL'auteur tomturton | 2013-02-26

8

Ce n'est pas valide:
```
arr[i].el.addEventListener('click', do_something(arr[i]));
```
L'auditeur doit être une fonction référence. Vous ne pouvez pas spécifier des paramètres au moment de l'auditeur d'affectation. Une fonction de gestionnaire sera toujours appelée avec le event être passé comme premier argument. Pour passer d'autres arguments, vous pouvez envelopper votre auditeur dans une fonction anonyme comme suit:
```
elem.addEventListener('click', function(event) {
  do_something( ... )
}
```
Pour être en mesure de supprimer via removeEventListener vous juste le nom de la fonction de gestionnaire:
```
function myListener(event) {
  do_something( ... );
}

elem.addEventListener('click', myListener);
```
D'avoir accès à d'autres variables dans la fonction de gestionnaire, vous pouvez utiliser des fermetures. E. g.:
```
function someFunc() {
  var a = 1,
      b = 2;

  function myListener(event) {
    do_something(a, b);
  }

  elem.addEventListener('click', myListener);
}
```
C'est très bien quand je n'ai pas besoin d'enlever l'écouteur ou le supprimer dans le même champ d'application que someFunc(). Malheureusement, ce n'est pas le cas (bien que peut-être il devrait être?)
En faisant de l'auditeur en fonction d'une variable globale ou un dans un contexte que vous pouvez accéder à partir de là où vous en avez besoin, cela peut être résolu. E. g. window.listeners.myListener = function() { ... }. De cette façon, vous pouvez à tout moment dire elem.removeEventListener('click', window.listeners.myListener)
J'ai résolu le problème en appliquant les fonctions d'écouteur pour arr[i].J'ai ensuite été en mesure de se référer à l'ensemble de l'arr[i] de l'objet sans avoir besoin de passer des paramètres à l'auditeur.

OriginalL'auteur marekful
0

Vous pouvez utiliser
```
for (var i = 0; i < arr.length; i++) {
    arr[i].el.addEventListener('click', do_something);
}
```
Que l'événement est passé à la do_something fonction comme premier paramètre, vous pouvez obtenir l'élément de l'événement comme
```
function do_something(e) {
    var obj = e.currentTarget
    //do something
}
```
pour supprimer auditeur
```
for (var i = 0; i < arr.length; i++) {
    arr[i].el.removeEventListener('click', do_something);
}
```
si vous souhaitez passer un autre obj comme paramètre le faire
```
for (var i = 0; i < arr.length; i++) {
    arr[i].el.addEventListener('click', do_something, obj);
}
```
Malheureusement électronique.currentTarget serait en fait le point d'arr[i].el
oui en question que vous avez posté le même dans la deuxième extrait de code pour la fonction anonyme arr[i].el.addEventListener('click', function (arr[i])... alors que voulez-vous faire passer comme argument réellement?
L'Argument doit être arr[i] par opposition à arr[i].el laquelle l'auditeur est attaché.
donc, si u veux arr[i] être transmis à laquelle l'auditeur est attaché. le event qui est par défaut le passé à la fonction contient la arr[i]

OriginalL'auteur Sandeep

-1

Cela peut se faire assez facilement, il suffit de pas que vous avez maintenant.

Au lieu d'essayer d'ajouter et de supprimer aléatoire anonymouse fonctions, vous avez besoin d'ajouter ou de supprimer une fonction qui gère l'exécution de votre autres fonctions.

var
//Here we are going to save references to our events to execute
cache = {},
//Create a unique string to mark our elements with
expando = String( Math.random() ).split( '.' )[ 1 ],
//Global unique ID; we use this to keep track of what events to fire on what elements
guid = 1,
//The function to add or remove. We use this to handler all of other 
handler = function ( event ) {
//Grab the list of functions to fire
var handlers = ( cache[ this[ expando ] ] && cache[ this[ expando ] ][ event.type ] ) || false;
//Make sure the list of functions we have is valid
if ( !handlers || !handlers.length ) {
return;
}
//Iterate over our individual handlers and call them as we go. Make sure we remeber to pass in the event Object
handlers.forEach( function ( handler ) {
handler.call( this, event );
});
},
//If we want to add an event to an element, we use this function
add = function ( element, type, fn ) {
//We test if an element already has a guid assigned
if ( !element[ expando ] ) {
element[ expando ] = guid++;
}
//Grab the guid number
var id = element[ expando ];
//Make sure the element exists in our global cache
cache[ id ] = cache[ id ] || {};
//Grab the Array that we are going to store our handles in
var handlers = cache[id ][ type ] = cache[ id ][ type ] || [];
//Make sure the handle that was passed in is actually a function
if ( typeof fn === 'function' ) {
handlers.push( fn );
}
//Bind our master handler function to the element
element.addEventListener( type, handler, false );
};
//Add a click event to the body element
add( document.body, 'click', function ( event ) {
console.log( 1 );
});

C'est juste une version réduite de ce que j'ai écrit avant, mais vous pouvez obtenir l'essentiel de ce que j'espère.

OriginalL'auteur whitneyit

Vous devez vous connecter pour publier un commentaire.