Компонентная архитектура

by Artem

HTML

<div id="test">Hide me!</div>

JavaScript

'use strict';

function Hider(options) {
  this.elem = options.elem;

  this.elem.onclick = this.onclick.bind(this);
}

Hider.prototype.onclick = function() {
  this.hide();
};

Hider.prototype.hide = function() {
  this.elem.hidden = true;
  this.elem.dispatchEvent(new CustomEvent('hide', {
    bubbles: true,
    cancelable: true,
    detail: {
      hidden: 'Totally hidden'
    }
  }));
};

var hider = new Hider({
  elem: test
});

//- hider.hide();

document.addEventListener('hide', function(evt) {
  alert(evt.detail.hidden);
});