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

Question

Я пытался определить обработчик события щелчка как метод класса элементов

Почему он не работает?

class Component extends HTMLElement {
    ...
    onclick () {
      console.log(event)
    }
}

Но он работает таким образом

class Component extends HTMLElement {
    constructor() {
        super()
        this.onclick = console.log
    }

}

Answer 1

Когда вы делаете

someElm.onclick = console.log

, где someElm - элемент, вы фактически вызываете сеттер , который присоединяет слушателя:

console.log(Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'onclick'));

Вот почему this.onclick = работает. Это не просто назначение - оно приводит к вызову функции, и этот вызов функции необходим браузеру для регистрации вложения слушателя.

В отличие от этого, наличие метода onclick в прототипе не вызывает этот установщик, поэтому он не говорит браузеру добавить слушателя; он просто добавляет свойство в цепочку прототипов экземпляра.

По аналогичным причинам создается объект со свойством onclick, в котором внутренний прототип объекта *1023* также имеет установщик onclick. не вызывает сеттер:

const theProto = {
  set onclick(newVal) {
    console.log('setter invoked');
  }
};

// Works:
theProto.onclick = 'foo';

console.log('About to create new object, but setter will not be invoked');
const theInstance = Object.create(theProto, { onclick: () => console.log('Onclick in instance running') });

Answer 2

ES7 + way

class CustomElement extends HTMLElement {
    onclick = () => {...}
}