События на компонентах

Использование заранее определенных в объекте функций обратного вызова

by Artem

CSS

.red {
  color: red;
}

JavaScript

function Person(name) {
  this.name = name;
  this._greet = this._greet.bind(this);
}

Person.prototype._greet = function() {
  if (typeof this.sayHello === 'function') {
    this.sayHello();
  }
};

Person.prototype.render = function() {
  var el = document.createElement('div');
  el.textContent = this.name;
  this.element = el;
  document.body.appendChild(el);

  this.element.addEventListener('click', this._greet);
};

var alice = new Person('Alice');
alice.render();
alice.sayHello = function() {
  alice.element.classList.toggle('red');
}