Der Wert von "this" innerhalb des Handlers mit addEventListener

Müssen Sie die "bind" - handler zu Ihrer Instanz.

var _this = this;
function onClickBound(e) {
  _this.handleCellClick.call(cell1, e || window.event);
}
if (cell1.addEventListener) {
  cell1.addEventListener("click", onClickBound, false);
}
else if (cell1.attachEvent) {
  cell1.attachEvent("onclick", onClickBound);
}

Beachten Sie, dass die event-handler hier normalisiert event Objekts (übergeben als ersten argument) und ruft handleCellClick im richtigen Kontext (d.h. bezogen auf ein element, das befestigt war Ereignis-listener).

Beachten Sie auch, dass Kontext Normalisierung hier (also das setzen der richtigen this im event-handler) entsteht ein Zirkelbezug zwischen der Funktion als event-handler (onClickBound) und ein element Objekt (cell1). In einigen Versionen des IE (6 und 7) dies kann, und wird wahrscheinlich, führen zu einem Speicherverlust. Dieses Loch im wesentlichen ist die browser Versagen, um Speicher freizugeben, auf Seite aktualisieren wegen Zirkelbezug zwischen einheimischen und host-Objekt.

Um es zu umgehen, müssen Sie entweder a) die drop - this Normalisierung; b) Verwendung von alternativen (und komplexer) Normalisierung Strategie; c) die "clean-up" vorhandenen Ereignis-Listener auf Seite entladen, d.h. durch die Verwendung von removeEventListenerdetachEvent und Elemente nulling (leider machen würde-Browser " schnelle Geschichte navigation nutzlos).

Können Sie auch eine JS-Bibliothek kümmert sich um diese. Die meisten von Ihnen (z.B.: jQuery, Prototype.js YUI, etc.) in der Regel handle Bereinigungen, wie beschrieben in (c).

InformationsquelleAutor der Antwort kangax

Auch, eine weitere Möglichkeit ist die Verwendung der EventListener-Schnittstelle (ab DOM2 !! Sich Fragen, warum niemand erwähnt es, wenn man bedenkt es ist der sauberste Weg und bedeutete für genau so eine situation.)

I. e, statt einer übergabe einer callback-Funktion übergeben Sie ein Objekt implementiert EventListener-Interface. Einfach ausgedrückt, es bedeutet nur, Sie sollten haben eine Eigenschaft, die in dem Objekt namens "handleEvent" , die Punkte, um die event-handler-Funktion. Der wesentliche Unterschied hier ist, innerhalb der Funktion this beziehen sich auf das übergebene Objekt die addEventListener. Das ist this.theTicketTable wird die Objekt-Instanz im belowCode. Um zu verstehen, was ich meine, schauen Sie sich den geänderten code gezielt:

ticketTable.prototype.render = function(element) {
...
var self = this;

/*
 * Notice that Instead of a function, we pass an object. 
 * It has "handleEvent" property/key. You can add other
 * objects inside the object. The whole object will become
 * "this" when the function gets called. 
 */

cell1.addEventListener('click', {
                                 handleEvent:this.handleCellClick,                  
                                 theTicketTable:this
                                 }, false);
...
};

//note the "event" parameter added.
ticketTable.prototype.handleCellClick = function(event)
{ 

    /*
     * "this" does not always refer to the event target element. 
     * It is a bad practice to use 'this' to refer to event targets 
     * inside event handlers. Always use event.target or some property
     * from 'event' object passed as parameter by the DOM engine.
     */
    alert(event.target.innerHTML);

    //"this" now points to the object we passed to addEventListener. So:

    alert(this.theTicketTable.tickets.length);
}

InformationsquelleAutor der Antwort

Stark beeinflusst von kamathln und gagarine die Antwort, die ich dachte, ich könnte bewältigen.

Dachte ich könnte Sie wahrscheinlich gewinnen ein bisschen mehr Freiheit, wenn Sie handeCellClick in einer callback-Liste und verwenden Sie ein Objekt mit Hilfe der EventListener-Schnittstelle auf das Ereignis zum auslösen des callback-Liste-Methoden mit der richtigen diese.

function ticketTable(ticks)
    {
        //tickets is an array
        this.tickets = ticks;
        //the callback array of methods to be run when
        //event is triggered
        this._callbacks = {handleCellClick:[this._handleCellClick]};
        //assigned eventListenerInterface to one of this
        //objects properties
        this.handleCellClick = new eventListenerInterface(this,'handleCellClick');
    } 

//set when eventListenerInterface is instantiated
function eventListenerInterface(parent, callback_type) 
    {
        this.parent = parent;
        this.callback_type = callback_type;
    }

//run when event is triggered
eventListenerInterface.prototype.handleEvent(evt)
    {
        for ( var i = 0; i < this.parent._callbacks[this.callback_type].length; i++ ) {
            //run the callback method here, with this.parent as
            //this and evt as the first argument to the method
            this.parent._callbacks[this.callback_type][i].call(this.parent, evt);
        }
    }

ticketTable.prototype.render = function(element)
    {
       /* your code*/ 
        {
            /* your code*/

            //the way the event is attached looks the same
            cell1.addEventListener("click", this.handleCellClick, false);

            /* your code*/     
        }
        /* your code*/  
    }

//handleCellClick renamed to _handleCellClick
//and added evt attribute
ticketTable.prototype._handleCellClick = function(evt)
    {
        //this shouldn't work
        alert(this.innerHTML);
        //this however might work
        alert(evt.target.innerHTML);

        //this should work
        alert(this.tickets.length);
    }

InformationsquelleAutor der Antwort niall.campbell