How does the synthetic click event differ from the usual one in JavaScript frameworks?

How does the synthetic click event differ from the usual one in JavaScript frameworks?

Today, it has become less standard to use synthetic events in modern js frameworks than the usual addEventListener. But how do these events work? In this article, I will try to use the example of a click in Cample.js version 3.2.0-beta.1 to talk about it.

First of all, when it comes to working with events, it is obvious that we are talking about the addEventListener construct, which looks like this:

element.addEventListener("событие", "функция", useCapture или options);

But is it that fast? As it turned out, it is not fast because of the specifics of the work.

When it comes to frameworks, every second of work counts, because it is theoretically thousands of saved hours of using sites or web applications.

Therefore, it was necessary to come up with an alternative that would replace this approach with a faster one.

The most banal idea of ​​events on the site – something produces an action, be it a mouse or a keyboard, and javascript calls a function that triggers on this event. Then there is a need for two things – to process the event and to store it somewhere. But where?

If we go back a little, we must remember that the DOM element is, one might say, an object with its own properties. It has the text, it has the next element and the previous element, etc. So what if the function is stored in the DOM element (object) itself? This immediately solves two problems: how to understand “what to call the function?” and “where to store it?”.

That is, roughly speaking, how it looks like:

<div></div>["клик"] = функция;

I agree that it looks strange, but if we get an element via getElementById, for example, and output it to the console as an object, then indeed, it will look something like we assigned a tag property in HTML (of course to an element in the DOM) with the function value.

So, the second problem remains, how to actually handle the click event knowing that we have a function in the DOM element. This is also quite an interesting question, but the implementation will obviously be related to addEventListener, because this method is able to handle events.

Then the question arises, where to put it if it will be slow on the Element in the DOM? There’s also a pretty cool solution here. You can set the event processing directly on the document, and in the properties accept the clicked target. How it would look in javascript theory:

document.addEventListener("click", (e)=>...);

So there’s a function that fires when an element in the document is clicked, and there’s a place where it’s clicked. So, this click location can be a DOM object in which a property with a trigger function has been nested.

For example, in Cample.js, the processing would look like this:

const newEach = each("new-each",
    ()=>["val"],
    `<div id="el" :click="{{importedData.fn(data)}}" 
    key="{{index}}">{{data}}</div>`
);

A div element with id “el” will be assigned a function that comes from the imported data. If the document is clicked with the mouse, then this function will be called.

Synthetic processing of the click event in modern frameworks will look like this.

Thank you all for reading this article!

Related posts