È possibile definire il gestore di eventi all'interno dell'accesso letterale dell'oggetto javascript stesso?

Question

So che potrei fare questo con chiusure (var auto = questo) se oggetto era una funzione ...

<a href="#" id="x">click here</a> 

<script type="text/javascript"> 
    var object = { 
     y : 1, 

     handle_click : function (e) { 
      alert('handling click'); 

      //want to access y here 

      return false; 
     }, 

     load : function() { 
      document.getElementById('x').onclick = this.handle_click; 
     } 
    }; 

    object.load(); 
</script> 

Answer 1

Così, i fili della parte del gestore di eventi più che bene (ho provato io stesso), ma, come il tuo commento indica che non hai accesso alla proprietà "y" dell'oggetto appena definito.

Questo funziona:

var object = { 
    y : 1, 
    handle_click : function (e) { 
    alert('handling click'); 

    //want to access y here 
    alert(this.y); 

    return false; 
    }, 
    load : function() { 
    var that = this; 
    document.getElementById('x').onclick = function(e) { 
     that.handle_click(e); // pass-through the event object 
    }; 
    } 
}; 
object.load(); 

Ci sono altri modi di fare anche questo, ma questo funziona.

Answer 2

Il modo più semplice per legare la chiamata al handle_click all'oggetto è definito in sarebbe qualcosa di simile:

 var self=this; 
     document.getElementById('x').onclick = 
      function(e) { return self.handle_click(e) }; 

Se è necessario passare nei parametri o vuole fare il pulitore di codice sguardo (per esempio, se si sta impostando un sacco di gestori di eventi simili), si potrebbe utilizzare una tecnica currying per ottenere lo stesso:

bind : function(fn) 
{ 
    var self = this; 
    // copy arguments into local array 
    var args = Array.prototype.slice.call(arguments, 0); 
    // returned function replaces first argument with event arg, 
    // calls fn with composite arguments 
    return function(e) { args[0] = e; return fn.apply(self, args); }; 
}, 

...

 document.getElementById('x').onclick = this.bind(this.handle_click, 
      "this parameter is passed to handle_click()", 
      "as is this one"); 

Answer 3

Vedo come farlo con l'ultima di Jason. Un modo per farlo senza la funzione anonima?

Answer 4

Siamo in grado di passare direttamente un oggetto con un metodo del gestore grazie a addEventListener, e si avrà accesso ai suoi attributi: http://www.thecssninja.com/javascript/handleevent

Spero che questo vi aiuterà a coloro che, come me, cercherà questo tema alcuni anni dopo!