addEventListener feuern mehrere Male für den gleichen Griff, wenn man Argumente mit anonymen Funktion

Aus irgendeinem Grund, wird der Ereignis-listener feuern zweimal für jedes element, wenn die übergabe von Argumenten in eine anonyme Funktion. I. e., das click-Ereignis an element el wird einmal registrieren und damit Feuer sobald.

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

Aber wenn ich will, um an meinem eigenen Argumente zu, wird es registrieren und Feuer zweimal.

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

Ist die Frage, warum und was ist die Lösung?

Sah ich woanders und kann nicht scheinen, um eine Lösung zu finden oder zu verstehen, warum dieses problem Auftritt. Ich habe versucht, die Implementierung der Lösungen in Wie übergibt ein argument an die listener-Funktion übergeben addEventListener? aber Sie hat nicht geholfen --

Ich habe die basic anonyme Funktion oder die Schließung und dann die erweiterte version, die ist unten gezeigt, aber es hat funktioniert.

Verstehe ich nicht, warum, ohne dass Argumente übergeben bewirkt, dass das element Ereignis-einmal registrieren und Argumente übergeben wodurch das element Ereignis sich zweimal zu registrieren.

Hier ist der 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>

Jede Hilfe würde geschätzt werden. Danke.

Warum sind Sie selbst nannte el.addEventListener zweimal?
Es ist außerhalb des Anwendungsbereichs der Diskussion. Es hat zu tun mit einigen Hersteller code an dem ich arbeite.

InformationsquelleAutor user717236 | 2014-10-01

  1. 17

    Die einfachste Lösung ist zum erstellen der neuen handler nur einmal:

    var newHandle = function(event) { handle(event, myArgument); };

el.addEventListener("click", newHandle, false);
el.addEventListener("click", newHandle, false);
    Ich danke Ihnen sehr. Yup, das funktioniert perfekt. Ich könnte auch den listener entfernen mit dieser Methode. Ich verstehe jetzt, warum es nicht funktioniert vor. Nochmals vielen Dank.
    Was ist ein handle?
    Ihre event-handler -
    handler ist eine Funktion, oder?
    ja...

    InformationsquelleAutor Felix Kling

  2. 2

    Gut,

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

    Register, um die gleiche Funktion "handle()"

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

    Register "Funktion() { handle(event, myArgument)"... das sind zwei einzigartige anonyme Funktionen. So wird es Feuer zweimal.

    Obwohl ich nicht ganz verstehen, warum Sie würde wollen, registrieren Sie es zweimal, die Lösung wäre das erstellen einer Funktion Rückgabe-Funktion, die Parameter benötigt.

    el.addEventListener("click", crateHandle(myArgument), false);

var createHandle = function(myArgument) {
  return function(event) {
    .... do something
  };
}

    Es immer noch nicht lösen, das Feuer doppelt Ausgabe obwohl.

    Hmm, da der Verweis ist anders? Also, wie ich Argumente für einen listener und garantieren, dass es sich nur einmal registrieren? Danke.
    Ich habe gerade editiert, dass auf die Antwort.
    Ihre Lösung hat das gleiche problem, wenn el.addEventListener("click", crateHandle(myArgument), false); zweimal aufgerufen.
    Es hat zu tun mit einigen code zu erstellen, die von einem Hersteller, das muss ich ändern. Ich bin das hinzufügen einer Ereignis-listener, um ein paar von Ihren lokalen Funktionen. Lassen Sie uns einfach sagen, wenn ich könnte es tun, ein anderer Weg, um zu vermeiden, mehrere Ereignis-Listener, ich würde. Ich danke Ihnen sehr.
    ja, da return function(event) { .... Mach was }; Ist noch eine anonyme Funktion... Sorry, ich habe keine Lösung für Sie, dann andere, dann neu zu prüfen, Registrierung es zweimal. Es macht keinen Sinn, das zu tun, wenn Sie nicht wollen, es zu Brand zweimal. Sollten Sie removeEventListener sorgfältig durch, bevor Sie es wieder.

    InformationsquelleAutor Stefan Svebeck

  3. 0

    addEventListener registriert, wie viele Zuhörer, wie es verwendet wird.

    Entsprechend der Dokumentation es dauert 3 Argumente, die Dritte ist useCapture hat nichts zu tun mit der Registrierung listener zweimal oder nicht. Es ist standardmäßig festgelegt false, so das hinzufügen false als Dritten parameter ändert sich nicht viel.

    Wahr. Aber wenn Sie den text Lesen Sie in der Dokumentation hier, es gibt Fälle, wo Sie ignoriert wiederholte Registrierungen -- 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.
    Recht. Im ersten Fall übergeben Sie die gleiche Funktion, also die zweite ignoriert wird. Im zweiten Fall übergeben Sie zwei verschiedene Funktionen.
    Anders als in der Erinnerung, die ich sammeln. Also, wie kann ich garantieren, ein Ereignis nur ein einziges mal registriert werden und gebe meine eigenen Argumente? Danke.
    Rufen Sie addEventListener nur einmal.
    Hi Felix. Ich kann es nicht. Das macht das problem nicht lösen.

    InformationsquelleAutor strah

Schreibe einen Kommentar