Как я могу получить доступ к этому в обработчике событий?

У меня есть класс, который создает элемент DOM и должен фиксировать все события кликов.

Упрощенный код:

function myClass()
{
  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", this.handleClick);
}
myClass.prototype.handleClick = function(evt)
{
  alert("Clicked!");
  // How to modify `this` object?
}

Теперь я хочу изменить некоторые атрибуты и переменные экземпляра myClass в handleClick(). Но this, конечно же, относится к объекту холста.

Вопрос. Как получить доступ к this объекта в обработчике событий?


javascript events oop this
person ComFreek    schedule 08.10.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Этого можно добиться, закрыв ссылку на ваш экземпляр и используя команду apply для принудительного определения области действия функции:

На шаге 1 у меня есть ваш пример, показывающий, как this является элементом, по которому щелкнули: http://jsfiddle.net/JAAulde/GJXpQ/

На шаге 2 у меня есть пример, который сохраняет ссылку на ваш экземпляр в вашем конструкторе, затем устанавливает анонимную функцию в качестве обработчика щелчков и вызывает ваш метод щелчка из сохраненной ссылки. http://jsfiddle.net/JAAulde/GJXpQ/1/ Это вызывает this в пределах вашего клика handler будет вашим экземпляром и будет работать на вас, если вам не нужен доступ к элементу, по которому вы щелкнули.

На шаге 3 я сохранил ту же ссылку и использовал анонимную функцию, но внутри этой функции я получаю аргументы, которые поступают в анонимную функцию при нажатии, я добавляю ссылку на экземпляр к этим аргументам и вызываю обработчик щелчка. в области щелкнутого элемента и передать новый набор аргументов. http://jsfiddle.net/JAAulde/GJXpQ/2/ Используя эту методологию, внутри обработчик кликов. Я могу получить доступ к выбранному элементу через this, а к экземпляру myClass через instance.

Надеюсь, это поможет. Это может быть довольно запутанным, так что задавайте вопросы, если это необходимо.

person JAAulde    schedule 08.10.2011
comment
Большое спасибо за три решения! Мне нравится лучшее решение 2 (хорошее и простое). Но по какой причине мне нужен доступ к исходному this? Когда я хочу получить доступ к элементу DOM, я делаю это с помощью evt.target. - person ComFreek; 09.10.2011
comment
Это просто вопрос предпочтений и того, как написан код. Если вы предпочитаете 2 и используете evt.target, это законно. Но если вы адаптируете какой-то существующий код, вы можете оказаться в ситуации, когда вам понадобится другая область действия, поэтому 3 может работать лучше в этой ситуации. - person JAAulde; 09.10.2011
comment
Хорошо спасибо. Я пишу свой собственный фреймворк, поэтому с этим проблем нет. Ответ принят ;) - person ComFreek; 09.10.2011

arrow_upward
2
arrow_downward

Вы можете сделать это следующим образом:

function myClass() {
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
      // use self here
  });
}

Поскольку слушатель на самом деле является замыканием, он поддерживает ссылку на переменную self, которая является объектом, который вы наблюдаете. Фактическое this, как вы поняли, ссылается на элемент холста.

Другой способ, который будет работать, и разделять методы:

function myClass(){
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
    myClass.prototype.call(self, evt);
  });
}
myClass.prototype.handleClick = function(evt){
  alert("Clicked!");
  // How to modify `this` object?
}

Теперь этот использует Function.call и присваивает this ссылки на .

person usoban    schedule 08.10.2011
comment
Спасибо! Я обновил пример, чтобы проверить доступ к «этому»: jsfiddle.net/StWu9. - person ComFreek; 09.10.2011

arrow_upward
1
arrow_downward

Вы можете использовать .bind, который «замораживает» значение this с предустановленным значением: http://jsfiddle.net/TKAHg/< /а>.

.bind возвращает новую функцию, которая делает то же самое, что и исходная функция, но устанавливает this так, чтобы вы могли полагаться на то, что это значение, которое вы указали.

Хотя .bind недоступен в старых браузерах, у MDC есть для него прокладка.

// bind 'this' value inside handleClick when clicked
this.domElement.addEventListener("click", this.handleClick.bind(this));
person pimvdb    schedule 08.10.2011
comment
Спасибо! Я обновил пример, чтобы элемент стал кликабельным: jsfiddle.net/TKAHg/1. Со старыми браузерами проблем нет, потому что я использую элемент canvas. Но мне нужно поддерживать Opeara и Safari. - person ComFreek; 09.10.2011