Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2019, 17:34
Аватар для deGeneral
Интересующийся
Отправить личное сообщение для deGeneral Посмотреть профиль Найти все сообщения от deGeneral
 
Регистрация: 27.11.2019
Сообщений: 10

Именованный обработчик события в методе класса
Приветствую всех!

Есть класс, управляющий движением элемента по экрану, в нем метод start():

start() {

        document.addEventListener('keydown', (event) => {
            ... <некий код> ...
        });

        document.addEventListener('keyup', (event) => {
             ... <некий код> ...
        });
}


Проблема в следующем: функциям-обработчикам нужно дать имена, чтобы в дальнейшем можно было сослаться на них для удаления EventListener. Пробовал делать их методами класса:

onKeyDown(event) {
}

onKeyUp(event) {
}


или даже глобальными:

function onKeyDown(event) {
}

function onKeyUp(event) {
}


- не работает. Только если код функции встраивается inline, тогда все ок.

Как победить проблему?
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2019, 18:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Хранить всё в классе, имеющем специальный метод handleEvent и передавать в listener просто this.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2019, 18:53
Аватар для deGeneral
Интересующийся
Отправить личное сообщение для deGeneral Посмотреть профиль Найти все сообщения от deGeneral
 
Регистрация: 27.11.2019
Сообщений: 10

Глубокая мысль. Попробую.
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2019, 22:27
Аватар для deGeneral
Интересующийся
Отправить личное сообщение для deGeneral Посмотреть профиль Найти все сообщения от deGeneral
 
Регистрация: 27.11.2019
Сообщений: 10

Вот она проблемка, определился с ней наконец-то:

class MyClass {

    constructor(x) {
        this.x = x;
    }

    onKeyDown(event) {          // Если эту функцию привязать к EventListener,
        console.log(this);      // то this из нее будет смотреть на document, x не виден
    }

    start() {
        document.addEventListener('keydown', this.onKeyDown);
        document.addEventListener('keydown', (event) => {
            console.log(this);  // а отсюда this будет смотреть на объект класса MyClass и прекрасно увидит this.x
        });
    }

}

window.onload = function() {
    let c = new MyClass(5);
    c.start();
};


Как объяснить, почему так происходит?
Как сделать так, чтобы из поименованной функции виделся x?
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2019, 22:55
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Потому что для стрелочной функции this - это конкретно this контекста объявления оной, а для нормальной функции this зависит от условий вызова.
Можно конечно использовать стрелочные функции, но именно для вашего случая и придумали передачу объекта:
class MyClass {
  constructor(x) {
    this.x = x;
  }

  onKeyDown(event) {          
    console.log(this);      
  }

  onKeyUp(event) {          
    console.log(this);     
  }

  handleEvent(event) {
    switch(event.type) {
      case 'keydown':
        return this.onKeyDown(event);
      case 'keyup':
        return this.onKeyUp(event);
        // ...
    }
  }

  start() {
    document.addEventListener('keydown', this);
    document.addEventListener('keyup', this);
  }
}

window.addEventListener('load', function() {
  let c = new MyClass(5);
  c.start();
});
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2019, 23:22
Аватар для deGeneral
Интересующийся
Отправить личное сообщение для deGeneral Посмотреть профиль Найти все сообщения от deGeneral
 
Регистрация: 27.11.2019
Сообщений: 10

Отлично, это как раз самое то, что меня устроит. Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу удалить обработчик события fedushok Events/DOM/Window 4 29.11.2017 14:52
Возможно ли поставить обработчик события "click" на элемент option? Dimaz jQuery 5 05.05.2013 13:39
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41