Sandbox components | Stefan Judis Web Development

Article components

// Extend the `EventTarget` class to get all the goodies
export class MyEventEmitter extends EventTarget {
  #list;

  constructor(list = []) {
    super();
    this.#list = list;
  }

  getItems() {
    return this.#list;
  }

  addItem(item) {
    this.#list = [...this.#list, item];
    // Dispatch a new event to notify listeners
    this.dispatchEvent(new Event("update"));
  }
}

// Attach multiple event listeners
// to the same button
const button = document.getElementById('cta-btn')

for(let i = 0; i < 3; i++) {
  button.addEventListener('click', () => {
    alert(`${i + 1}. event listener of 3...`);
  });
}

document.getElementById('nuke-btn')
  .addEventListener('click', (event) => {
    // Boom! Nuke and remove
    // all registered event listeners
    button.replaceWith(button.cloneNode(true));

    alert('All existing event listeners cleared!');
  });

Open Sandbox