How does addEventListener work under the hood?

Question

var elem=document.getElementById('mydiv');
elem.addEventListener('click',function(){...});

After execution of the above code elem is an instance of HTMLDivElement interface. My big question is what exactly addEventListener() method does. In which DOM objects does it register the listener and how it does that(which properties of these DOM objects it changes). In other words, I'd like to know how elem is informed about the addition of a listener, which of its properties(all of them down to its prototype chain) are affected. For example I know that Event.prototype has crucial properties like type , target ; however I cannot "connect" them with elem ...

I do not want to find which event listeners are attached to the above DOM node. I want to know the inner procedures.

Thank you

Answer 1

After execution of the above code elem is an instance of HTMLDivElement interface. My big question is what exactly addEventListener() method does.

In which DOM objects does it register the listener

On the DOM element on which addEventListener was called. (Of course, events on sub-elements could bubble up).

and how it does that (which properties of these DOM objects it changes)

How it does that is an internal implementation detail. It changes no user-visible properties of the DOM object.

In other words, I'd like to know how elem is informed about the addition of a listener

It is not.

which of its properties (all of them down to its prototype chain) are affected

None of them.

For example I know that Event.prototype has crucial properties like type, target; however I cannot "connect" them with elem...

Those are properties on Event , which has nothing to do with elem .