What exactly happens when I create addEventListener? One new application daemon is created in the browser, which monitors only one thing that we asked it, or how? + If I create a lot of handlers does this affect the performance?

I just think that in fact there is no difference how many of them are created - Javascript will filter them inside itself and choose to respond only to the necessary events. I am right or not.

I hope brought the thought.

  • 2
    Specification - Grundy
  • The event waits for a certain action, and then it triggers when the action is completed - the function is called. - L. Vadim
  • vivid demonstration of the general principle of how the browser performs js: latentflip.com/loupe - spectre_it

1 answer 1

What exactly happens when I create addEventListener ?

The version is very simplified and may differ from how it is made in the browser!

Each DOM element has a list of events. List of events o is an object whose properties are - ("event name": [events]).

Part of the events, these are standard element events.

Example: hover for a link, the link changes color.

Sample event list:

 { "prop1": 1, "prop2": 2, "events": { "onClick": [ function (eventObject) {...}, function (eventObject) {...}, function (eventObject) {...} ... ] "onChange": [ function (eventObject) {...}, function (eventObject) {...}, function (eventObject) {...} ... ] } }

After the user action, a specific event is triggered for this object, for example, onChange :

 obj.trigger("onChange", eventObject);

eventObject object containing information about the event (Maybe anything).

After that, all functions of the onChange list are onChange parallelly or sequentially (depending on the execution here). The chain of events can be interrupted

 eventObject.preventDefault();

Approximately so.

If I create a lot of handlers does this affect the performance?

It affects. More events, longer to perform. But not much, I think browser manufacturers have optimized this for a long time.