Как ссылаться на объект в обработчике событий JavaScript? - PullRequest
Новая
       13

Как ссылаться на объект в обработчике событий JavaScript?

1 голос
/ 23 апреля 2010

Примечание: В этом вопросе используется jQuery , но вопрос не имеет ничего общего с jQuery !

Хорошо, поэтому у меня есть этот объект: 

var box = new BigBox();

Этот объект имеет метод с именем Serialize(): 

box.AddToPage();

Вот метод AddToPage(): 

function AddToPage()
{
    $('#some_item').html("<div id='box' onclick='this.OnClick()'></div>");
}

Проблема выше - this.OnClick() (которая, очевидно,не работает).Мне нужен обработчик onclick для вызова члена класса BigBox.Как я могу это сделать?

Как объект может ссылаться на себя в обработчике событий?

Ответы [ 4 ]

4 голосов
/ 23 апреля 2010

Вы должны прикрепить обработчик, используя jQuery: 

function AddToPage()
{
    var self = this;
    $('#some_item').empty().append(
        $("<div id='box'></div>")
            .click(function() { self.OnClick(someParameter); })
    );
}

Чтобы заставить обработчик событий вызываться в контексте вашего объекта (и передавать параметры), вам нужно добавить анонимную функциюэто вызывает обработчик правильно.В противном случае ключевое слово this в обработчике будет ссылаться на элемент DOM.

1 голос
/ 23 апреля 2010

В jQuery 1.4 вы можете использовать прокси. 

BigBox.prototype.AddToPage= function () {
    var div= $('<div>', {id: box});
    div.click(jQuery.proxy(this, 'OnClick');
    div.appendTo('#some_item');
}

Вы также можете использовать ручное закрытие: 

    var that= this;
    div.click(function(event) { that.OnClick(event); });

Или, проще всего, но требуется некоторая помощь для реализации в браузерах, которые еще не поддерживают его (это функция ECMAScript Fifth Edition): 

    div.click(this.OnClick.bind(this));
1 голос
/ 23 апреля 2010

Если вы используете jQuery, то вы можете отделить свой код от разметки (старая вещь разделения проблем), как это 

$(document).ready(function() {

  var box = new BigBox();

  $('#box').click(function() {
    box.serialize();
  });

});

Вам нужно добавить обработчик кликов только один раз для всех div с идентификатором box. И поскольку щелчок является анонимной функцией, он получает область действия функции, в которую он помещен, и, следовательно, доступ к экземпляру блока.

1 голос
/ 23 апреля 2010

Не добавлять обработчики событий со встроенным кодом. 

function AddToPage()
{
    $('#some_item').html("<div id='box'></div>");
    $('#box').click(this.OnClick);
}

РЕДАКТИРОВАТЬ :

Другой способ (исключает дополнительный выбор): 

function AddToPage()
{
    var div = $('<div id="box"></div>'); // probably don't need ID anymore..
    div.click(this.OnClick);

    $('#some_item').append(div);
}

РЕДАКТИРОВАТЬ (в ответ на "как передать параметры");

Я не уверен, какие параметры вы хотите передать, но .. 

function AddToPage()
{
    var self = this, div = $('<div></div>');
    div.click(function (eventObj) {
        self.OnClick(eventObj, your, params, here);
    });

    $('#some_item').append(div);
}
...