¿Se puede definir el controlador de eventos en el acceso literal al objeto javascript?

Question

Sé que podría hacer esto con cierres (auto var = presente) si el objeto era una función ...

<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

Por lo tanto, la parte de control de eventos cables hasta bien (he comprobado yo mismo) pero, como su comentario indica que no tiene acceso a la propiedad "y" del objeto que acaba de definir.

Esto funciona:

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(); 

Hay otras formas de hacer esto también, pero esto funciona.

Answer 2

La forma más sencilla de obligar a la llamada a handle_click al objeto que se define en el que sería algo como esto:

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

Si tiene que pasar en los parámetros o si desea hacer la limpia mirada de código (por ejemplo, si se está configurando una gran cantidad de controladores de eventos similares), podría utilizar una técnica currying para lograr el mismo:

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

Veo cómo hacerlo con la última de Jason. ¿Alguna forma de hacerlo sin la función anónima?

Answer 4

Podemos pasar directamente a un objeto con un método de control gracias a AddEventListener, y usted tendrá acceso a sus atributos: http://www.thecssninja.com/javascript/handleevent

espero que esto ayudará a los que, como yo, buscará este tema algunos años ¡después!