Javascript addEventListener (event registrieren mehrere Male für die gleiche Funktion; die Verwendung von OOP Javascript

Ich bin beschäftigt Object-Oriented Javascript, in Verbindung mit dem registrieren von event-Listenern. Von dem, was ich verstehe, über die Ereignis-Listener, wenn die Funktion angewendet eventtarget bereits registriert wurde, wiederholte versuche, um dieses gleiche Ereignis-listener werden ignoriert. In anderen Worten, es sollte Feuer nur einmal. Aber das ist nicht der Fall in der folgenden code (kann auch gesehen werden, auf jsfiddle).

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Mehrere identische Ereignis-Listener

Wenn mehrere identische EventListeners registriert sind, auf der gleichen EventTarget mit den gleichen Parametern, die die doppelte Instanzen werden verworfen. Sie verursachen nicht die EventListener aufgerufen werden, zweimal, und, da die Duplikate werden verworfen, werden Sie nicht brauchen, um manuell entfernt werden mit der Methode removeEventListener.

http://jsfiddle.net/qd1e8f6c/

HTML

<div id="wrapper">
    <input id="t1" type="text" />
    <input id="btn" type="button" />
</div>

JS

var namespace = namespace || {};

namespace.event = {
    addListener: function(el, type) {
        var handle = function() {
            switch (type) {
                case "focus": 
                    console.log(el.value);
                    break;
                case "click":
                    console.log(el.id + " was clicked");
                    break;
            }
        };

        el.addEventListener(type, handle, false);
    }
};

namespace.ExampleClass = function() {
    this.init = function(el1, el2) {
        el1.value = "123";
        el2.value = "Click Me";
    };
};

var textbox = document.getElementById("t1");
var button = document.getElementById("btn");

var inst = new namespace.ExampleClass();

inst.init( textbox, button );

namespace.event.addListener(textbox, "focus");
namespace.event.addListener(button, "click");

//same handle -- shoudln't it only add the event once?
namespace.event.addListener(textbox, "focus");
namespace.event.addListener(button, "click");

Wie Sie sehen können in den letzten Zeilen des obigen code eine Funktion namens addListener wird zweimal ausgeführt, die registriert ein Ereignis-zu jeder Eingabe. Dann addListener erneut ausgeführt wird. Ich gehe davon aus, dass es sich nicht noch einmal registrieren und ignorieren, aber es ist eigentlich registriert. Ich verstehe es nicht. Die Funktion im Namensraum genannt handle ist genau das gleiche. Was mache ich hier falsch?

Jede Hilfe wäre toll. Ich danke Ihnen so sehr.

Sie hat nicht alles tun, um zu verhindern, dass es aus der addition der event zweimal, nicht sicher, warum würden Sie erwarten, dass Sie es tun, automatisch.
Denn ich war unter den Eindruck, dass es der addEventListener registriert nicht den Fall wieder, wenn das Ziel ist das gleiche, und der Griff ist der gleiche.
Habe ich gerade eingefügt ein Zitat aus dem mozilla-link auf der addEventListener. Es sei denn, ich lese es falsch, und ich kann, bin ich interpretieren als das Ereignis wird nur ausgelöst, sobald.
Sorry, ja natürlich. @loganfsmyth, erklärt er.

InformationsquelleAutor user717236 | 2014-09-30

  1. 8

    Können Sie nicht binden, die gleiche Art/Funktion-pair-Mädchen, um ein element. Aber das ist nicht, was Sie tun, Sie sind explizit erstellen Sie eine neue handler Funktion bei jedem Anruf zu Ihrem namespace.addEventListener Funktion.

    Was Sie haben:

    namespace.event = {
    addListener: function(el, type) {
        var handle = function() {
            switch (type) {
                case "focus": 
                    console.log(el.value);
                    break;
                case "click":
                    console.log(el.id + " was clicked");
                    break;
            }
        };

        el.addEventListener(type, handle, false);
    }
};

    Was würde das tun, was Sie erwarten:

    var handle = function(evt) {
    var el = evt.currentTarget;

    switch (type) {
        case "focus": 
            console.log(el.value);
            break;
        case "click":
            console.log(el.id + " was clicked");
            break;
    }
};

namespace.event = {
    addListener: function(el, type) {
        el.addEventListener(type, handle, false);
    }
};

    da gibt es nur eine Instanz von handle im zweiten Fall.

    Namensräume

    Was Sie haben, ist ein Ansatz zur Verwendung von Namensräumen, aber die meisten oft in diesen Tagen, JS Namensräume erfolgt über die Modul-Muster

    Für Ihren Fall zum Beispiel, brauchen Sie nicht einmal erscheinen, um wirklich zu kümmern, wodurch der code Global zugänglich über die 'namespace' variable, da es nur in Ihrem code verwendet, so dass Sie tun könnten:

    var namespace = (function(){
    function handle(evt) {
        var el = evt.currentTarget;

        switch (type) {
            case "focus": 
                console.log(el.value);
                break;
            case "click":
                console.log(el.id + " was clicked");
               break;
        }
    };

    function addListener(el, type) {
        el.addEventListener(type, handle, false);
    }

    function ExampleClass() {
        this.init = function(el1, el2) {
            el1.value = "123";
            el2.value = "Click Me";
        };
    };

    var textbox = document.getElementById("t1");
    var button = document.getElementById("btn");

    var inst = new ExampleClass();

    inst.init( textbox, button );

    addListener(textbox, "focus");
    addListener(button, "click");


    //And if you do care about 'inst' being global, you'd explicitly add it to the window.
    window.inst = inst;

    //Whatever functions you want to expose as 'namespace' would go here.
    return {
        event: {
            addEventListener: addEventListener
        }
    };
})();
    Vielen Dank für das Beispiel! Ich Schätze es sehr. Frage? Wenn ich die handle Funktion eine Teilmenge von namespace würde addEventListener Feuer nur einmal? Ich will, dass alle Deklarationen innerhalb namespace, wenn überhaupt möglich. Nochmals vielen Dank.
    Das wäre fein, da gibt es noch eine Instanz der Funktion. Darf ich Fragen, warum diese alle zum Leben brauchen, auf den namespace obwohl? Das ist eine hässliche Art und Weise, es zu tun und es gibt vielleicht bessere Ansätze.
    Sicher, Sie können. Ich bin ändern einige Funktionen des Verkäufers Programm für einen fix (der Verkäufer nicht behoben also bin ich der Bote, um es zu beheben). Diese Anbieter können Funktionen aufgerufen werden, die wiederholt in der gleichen Sitzung. Also, ich brauche, um sicherzustellen, dass Ereignisse nur ein einziges mal registriert. Ich will nicht auf Ihre unzähligen JS-Dateien; so, ich habe alles in meinem eigenen Namensraum. Wenn es ein besserer Ansatz, ich würde es gerne hören. Das war der beste Ansatz, den ich denken konnte, ohne in Konflikt mit den Lieferanten-code.
    Aktualisiert
    Oh, Wow. Vielen Dank so viel für die Bildung. Ich werde auf jeden Fall Lesen, auf den link und versuchen, diese umzusetzen. Vielen Dank, einmal mehr!

    InformationsquelleAutor loganfsmyth

Schreibe einen Kommentar