Может ли обработчик событий, определенный в объектном литерале javascript, обращаться непосредственно к себе? - PullRequest
Новая
       11

Может ли обработчик событий, определенный в объектном литерале javascript, обращаться непосредственно к себе?

6 голосов
/ 20 ноября 2008

Я знаю, что мог бы сделать это с замыканиями (var self = this), если бы объект был функцией ... 

<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>

Ответы [ 4 ]

3 голосов
/ 20 ноября 2008

Самый простой способ привязать вызов к handle_click к объекту, в котором он определен, будет выглядеть примерно так: 

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

Если вам нужно передать параметры или сделать код более чистым (например, если вы настраиваете много похожих обработчиков событий), вы можете использовать технику каррирования для достижения того же: 

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");
3 голосов
/ 20 ноября 2008

Итак, часть обработчика событий подключается очень хорошо (я сам ее тестировал), но, как показывает ваш комментарий, у вас нет доступа к свойству "y" объекта, который вы только что определили.

Это работает: 

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

Есть и другие способы сделать это, но это работает.

0 голосов
/ 26 декабря 2013

Мы можем напрямую передать объект с помощью метода-обработчика благодаря AddEventListener, и у вас будет доступ к его атрибутам: http://www.thecssninja.com/javascript/handleevent

Надеюсь, это поможет тем, кто, как и я, будет искать эту тему через несколько лет!

0 голосов
/ 20 ноября 2008

Я вижу, как это сделать с последним Джейсоном. Есть ли способ сделать это без анонимной функции?

...