Избегая var this = this; при написании обработчиков событий jQuery


Не очень важный вопрос, но здесь мы идем..

Как избежать использования var _this = this в обработчиках событий jQuery? то есть я не люблю делать:

var _this = this;
$(el).click(function (event) {
  //use _this to access the object and $(this) to access dom element
});

Следующие 2 способа не идеальны

$(el).click($.proxy(function (event) {
  //lost access to the correct dom element, i.e. event.target is not good enough (see http://jsfiddle.net/ne3n3/1/)
}, this));

$(el).click({_this: this}, function (event) {
  //have access to $(this) and event.data._this, but it seems too verbose
})

В идеале я хотел бы сделать что-то вроде

$(el).click(function (event) {
  this.method(); // this is accessing the object
  event.realTarget; // this is accessing the dom element
}, this); // <= notice this
3   6   2011-10-12 18:01:00

3 ответа:

Http://api.jquery.com/event.currentTarget/ говорит:

" это свойство обычно будет равно этому функции."

Http://jsfiddle.net/ne3n3/2/

Я не совсем уверен, что правильно вас понял, но если то, что вы хотите, - это ссылка на функцию, в которой Вы были при создании функции обратного вызова, вы могли бы сделать это так (хотя это не совсем экономит вам ввод текста):

$(el).click(function(parent) {
    return function() {
        // Use parent instead of _this
    }
}(this))

Нельзя назначить переменную this как объекту, так и элементу DOM. Моя рекомендация состоит в том, чтобы назначить объект переменной, отличной от this.

Наилучшим способом доступа к объекту и элементу DOM было бы что-то вроде следующего:

$(el).click($.proxy(function (event) {
  // can reference DOM element with this i.e. $(this)
  // can reference your object with the variable myObject
  //     i.e. $(this).val(myObject.data);
}, myObject));

Или, может быть, так:

$(el).click({myObject: this}, function (event) {
  //have access to $(this) and event.data.myObject, but it seems too verbose
});

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