How is JavaScript .on() method defined?

Question

In the jQuery library, the function doesn't exist, yet every jQuery object has these essential methods. In another thread, it was stated that .on() belongs to the node API, which confuses me, since it can be used in the front-end and I don't even need to include const EventEmitter = require('events'); and neither does the jquery.min.js. I just would like to learn about why for example the strings 'click' or 'mouseover' are valid arguments.

Also, the on() method makes extensive use of callback functions. For example: $('class').on('click', event => {...})

I would like to understand why it can be passed a lambda function or 'event' as stated above.

Also, some might find the following resource useful, however, it is not really that straightforward and made me come up with more questions than answers: https://nodejs.org/docs/latest/api/events.html

Solution

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' });

Comments

[Pointy]

Various libraries use the word "on" as a name (or part of names) in event handling because of what the word means in ordinary English usage. The jQuery .on() has absolutely nothing directly to do with any Node APIs other than the name. The jQuery .on() does indeed "exist" in the library source, but the jQuery code is written for efficiency, not readability.

[VLAZ]

The Node.JS .on and the jQuery .on are different. You seem to be mixing up both of them.

[Aaron]

What do you mean the function doesn't exist in the JQuery library? It's documented here.

[Patrick Roberts]

@Binvention the DOM model defines an EventTarget.prototype.addEventListener() method, not an on() method... on() is a completely synthetic function, there is absolutely no "inheritance" going on here.

[3000]

j11y.io/jquery/#v=2.1.3&fn=jQuery.fn.on

[freedomn-m]

A jquery object doesn't inherit from a DOM object in anyway at all. It wraps the DOM object, that's why you have to do $("#id").get(0).id and not just $("#id").id.

[cheekybanana]

Wonderful answer, thank you.