la méthode addEventListener tir plusieurs fois pour la même poignée lors du passage dans des disputes avec fonction anonyme

Pour une raison quelconque, l'écouteur d'événement est déclenché deux fois pour chaque élément lors du passage d'arguments dans une fonction anonyme. I. e., l'événement click sur l'élément el va enregistrer une fois et, par conséquent, le feu une fois.

el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);

Mais si je veux passer mes propres arguments, il va s'inscrire et le feu deux fois.

el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);

La question est de savoir pourquoi et quelle est la solution?

J'ai regardé ailleurs et n'arrive pas à trouver une solution ou à comprendre pourquoi ce problème est survenu. J'ai essayé de mettre en œuvre les solutions dans Comment passer d'un argument à la fonction écouteur passé à la méthode addEventListener? mais ils n'ont pas d'aide --

J'ai fait la base anonyme de la fonction ou de la fermeture puis la version la plus avancée, qui est illustré ci-dessous, mais il a fait un travail.

Je ne comprends pas pourquoi en passant pas les arguments des causes de l'élément de l'événement à enregistrer une fois et de passer des arguments à l'provoquant l'élément de l'événement à inscrire deux fois.

Voici le code:

<html>
<head>
<script type="text/javascript">
var handle_2 = function(evt, type) {
var test;
switch (type) {
case "focus": 
console.log(evt.target.value);
break;
case "click":
console.log(evt.target.id + " was clicked");
break;
default: console.log("no type found");
}
};
window.onload = function() {
var textbox = document.getElementById("t1");
var button = document.getElementById("btn");
textbox.value = "456";
button.value = "Press";
var typeFocus = "focus", typeClick = "click";
textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);
//Registers again for each element. Why?
textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);
};
</script>
</head>
<body>
<div id="wrapper">
<input id="t1" type="text" />
<input id="btn" type="button" />
</div>
</body>
</html>

Toute aide serait appréciée. Merci.

  • Pourquoi êtes-vous encore en appelant el.addEventListener deux fois?
  • C'est à l'extérieur de la portée de la discussion. Il a à faire avec certains vendeur code, je travaille sur.
InformationsquelleAutor user717236 | 2014-10-01
  1. 18

    La solution la plus simple est de créer le nouveau gestionnaire d'une seule fois:

    var newHandle = function(event) { handle(event, myArgument); };
el.addEventListener("click", newHandle, false);
el.addEventListener("click", newHandle, false);
    • Je vous remercie beaucoup. Yup, il a parfaitement fonctionné. Je pourrais aussi supprimer l'auditeur avec cette méthode. Je comprends maintenant pourquoi ça ne fonctionnait pas avant. Merci encore.
    • Qu'est-ce que la poignée?
    • votre gestionnaire d'événement
    • gestionnaire est une fonction ou qui?
    • oui......
    • comment enlever l'auditeur? Juste à l'aide de el.removeEventListener("click", newHandle), ou?
    • oui...

    InformationsquelleAutor Felix Kling
  2. 4

    Bien,

    el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);

    Registres de la même fonction "handle()"

    el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);

    Registres "fonction() { handle(événement, myArgument)"... qui sont deux fonctions anonymes. Ainsi, il mettra le feu à deux reprises.

    Bien que je ne comprenez pas pourquoi vous désirez vous inscrire à deux reprises, la solution serait de créer une fonction de retour de votre fonction qui prend en paramètres.

    el.addEventListener("click", crateHandle(myArgument), false);
var createHandle = function(myArgument) {
return function(event) {
.... do something
};
}

    Il n'est toujours pas à résoudre le feu à deux reprises problème bien que.

    • Hmm, parce que la référence est différente? Alors, comment puis-je passer des arguments à un auditeur et la garantie qu'il sera de s'inscrire qu'une fois? Je vous remercie.
    • J'ai juste modifié qu'à la réponse.
    • Votre solution a le même problème si el.addEventListener("click", crateHandle(myArgument), false); est appelée deux fois.
    • Il y a à faire, avec un peu de code en créant, par un fournisseur, que j'ai modifier. Je vais ajouter un écouteur d'événement à quelques-uns de leurs fonctions locales. Disons que si je pouvais le faire d'une autre manière, afin d'éviter la multiplication des écouteurs d'événement, je le ferais. Je vous remercie beaucoup.
    • oui, depuis return function(event) { .... faire quelque chose }; Est encore une fonction anonyme... Désolé, je n'ai pas de solution pour vous, puis d'autres, puis ré-envisager l'enregistrement deux fois. Il n'est pas judicieux de le faire si vous ne voulez pas qu'il le feu à deux reprises. Vous devriez removeEventListener avant de l'enregistrer à nouveau.
    • Pas de problème. Je vous remercie de votre honnêteté et de votre aide gentiment! Comment pourrais-je appeler removeEventListener dans ce contexte? Depuis que je suis passer des arguments à l'écouteur d'événement, j'imagine que j'aurais besoin pour assurer la référence est la même lors de l'appel de removeEventListener. Je vous remercie encore.
    • En général, vous avez pour enregistrer une référence à la fonction que vous avez créé et le retirer. Je suppose que vous pouvez également enregistrer votre "myArgument" comme une variable globale et d'y accéder par le biais de la fonction de gestion.

    InformationsquelleAutor Stefan Svebeck
  3. 0

    addEventListener registres comme de nombreux auditeurs, car il est utilisé.

    Selon la la documentation il prend 3 arguments, le troisième est useCapture qui n'a rien à voir avec l'enregistrement d'auditeur deux fois ou pas. Il est par défaut à false, donc, l'ajout de false d'un troisième paramètre ne change pas beaucoup.

    • Vrai. Mais si vous lisez le texte dans la documentation, il y a des cas où il ignorer répété enregistrements -- If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the removeEventListener method.
    • La droite. Dans le premier cas, vous passez à la même fonction, ainsi que le deuxième est ignoré. Dans le second cas, vous êtes de passage à deux fonctions différentes.
    • Différent que dans la mémoire de référence, j'imagine. Alors, comment puis-je garantir un cas ne sera enregistré qu'une seule fois et de passer mes propres arguments? Je vous remercie.
    • Appel addEventListener qu'une seule fois.
    • Salut Félix. Je ne peux pas. Cela ne résout pas le problème.
    • Ensuite, vous avez à stocker une référence à votre nouvelle fonction: var handler2 = function() { handler(....); }; et utilisez cette fonction à la place.
    • Désolé, Félix. Si je pouvais le faire d'une autre manière, je le ferais. Je suis juste le messager qui a de faire quelques modifications à un fournisseur de code et ce problème est venu...oh, stocker une référence à elle. OK, je vais voir ce que je peux venir avec, alors. J'ai de la valeur à votre entrée! Je vous remercie.
    • Pas de soucis et vous êtes les bienvenus! 🙂

    InformationsquelleAutor strah