How is JavaScript .on() method defined?

on method registers a handler, which is callback function with specific signature. Once an event is triggered, a handler is called. It receives necessary data as function parameters (commonly event object).

jQuery and Node event emitter aren’t related in any way, they both have on method because it’s a conventional way for a method that adds event handlers.

A naive implementation that shows how it works:

const emitter = {
  handlers: {},

  on(eventName, handler) {
    if (!this.handlers[eventName])
      this.handlers[eventName] = [];

    this.handlers[eventName].push(handler);
  },

  emit(eventName, data) {
    for (const handler of this.handlers[eventName])
      handler(data);
  }
};

emitter.on('foo', data => console.log(data.text));

emitter.emit('foo', { text: 'Foo event triggered' });

Leave a Comment