Minimal event emitter for web

EventEmitter.js

// EventEmitter.js

export class EventEmitter {
  constructor () {
    this._events = Object.create(null)
  }

  // add event listener
  on (name, handle) {
    const handlers = this._events[name] || []
    handlers.push(handle)
    this._events[name] = handlers
  }
  
  // remove a handler from event listener
  // or remove all handlers from event listener
  // or clean all events listener
  off (name, handle) {
    if (!handle) {
      this._events[name] = []
      return 0
    }
    if (!name) {
      this._events = {}
      return 0
    }
    const handlers = this._events[name] || []
    const filtered = handlers.filter(h => h !== handle)
    this._events[name] = filtered
    return filtered.length
  }

  // emit an event
  // first parameter is event name
  // remaining will be passed to handler as its parameters
  emit (...args) {
    const eventName = args[0]
    const handlers = this._events[eventName] || []
    const params = args.slice(1)
    handlers.forEach((handle) => {
      handle.apply(this, params)
    })
  }
}

example.md

Usage

app's event manager

// event.js
import { EventEmitter } from './EventEmitter.js'

export const emitter = new EventEmitter()

at the dashboard

// dashboard.js

import { emitter } from './event.js'

// example handler
const logout = () => {
  localStorage.removeItem('token')
  window.location.replace('/login')
}

// add listener
emitter.on('user-logout', logout)

at another place where we have "Logout" button

// menu.js

import { emitter } from './event.js'

const triggerLogout = () => {
  // update state...
  emitter.emit('user-logout')
}

const buttonLogout = document.getElementById('button_logout')
buttonLogout.addEventListener('click', triggerLogout)