7
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

Unknown developer
  • 5,414
  • 13
  • 52
  • 100
  • Have you done any research on this yourself? What have you found so far? – Jaromanda X Nov 25 '15 at 10:30
  • 2
    It's implementation defined. AFAIK (correct me if I'm wrong, or better yet write an answer) addEventListener changes nothing in the prototype chain. Heck. On lots of browsers DOM elements ***have no prototype chain*** - they're special `[native object]` objects written in C and exposing an incomplete interface of themselves to javascript. Still, even if we look at just the properties of the element. addEventListener changes nothing on the element. It's all internal and you have no way to access them. – slebetman Nov 25 '15 at 10:33
  • Hmm.. playing with things further it appears that on chrome at least this: `document.getElementsByTagName('div')[0].constructor.prototype` gives the prototype of `div`s.. interesting... – slebetman Nov 25 '15 at 10:37
  • I am almost sure there are some properties that denote the existence of event handlers upon an object. But which? – Unknown developer Nov 25 '15 at 10:40
  • some info here https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener – Hacketo Nov 25 '15 at 10:51
  • Check this on how to implement your own listener mechanisms: http://stackoverflow.com/questions/10978311/implementing-events-in-my-own-object. – Leandro Zubrezki Nov 25 '15 at 10:52
  • you have external process "event queue" and all events are in there, this all you need to know. You cannot find changed properties or stuff like that – Vitaliy Terziev Nov 25 '15 at 11:08

1 Answers1

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.

Community
  • 1
  • 1