Как добавить обработчик при создании ES6 Класса?

Question

[r_g_b_a]

Только изучаю как работать с классами, возник простой вопрос. Есть пример:

const Component = function(element) {
	this.element = element;
	this.button = this.element.find('.button');

	this.onButtonClick = this.onButtonClick.bind(this);
	this.button.on('click', this.onButtonClick);
}

Component.prototype.onButtonClick = function() {
	alert();
}

new Component( $('.el') );

Пытаюсь переписать его с помощью классов:

class Component {
	constructor(element) {
		this.element = element;
		this.button = this.element.find('.button');
	}

	onButtonClick() {
		alert();
	}
}

Как тут повесить обработчик на кнопку this.button.on('click', this.onButtonClick);?

Comments

[Ярослав Иванов]

Без bind'a

[r_g_b_a]

Ярослав Иванов, Можно пример?

[Ярослав Иванов]

r_g_b_a, эксперементируйте.

Answer 1

[skuvaWeb]

class Component {
  constructor(element) {
    this.element = element;
    this.button = this.element.find('.button');

    this.bindListeners();
  }

  onButtonClick() {
    alert();
  }

  bindListeners() {
    // Вариант 1 
    this.button.addEventListener('click', () => {
      this.onButtonClick()
    })

     // Вариант 2 
    this.button.addEventListener('click',  this.onButtonClick.bind(this))
  }
}