Browser event handling -

Another feature of the web is that applications have a functional response to user’s interaction, such as clicking, moving the mouse, typing on the keyboard, and using the scroll. Apart from creating the DOM, the browser is responsible for event handling during the page-building process. The browser additionally registers event listeners. Event listeners are functions that execute when certain events occur (mouse move, keyboard press).

Event handling overview

JavaScript has one stack and thus can run only one piece of code. We consider those types of languages single-threaded. The code is executed in order and the currently running code needs to finish before the next one is inserted onto the call stack.

What happens if a function takes more time than needed to finish its execution? Then the whole page becomes unresponsive (try to test this when running alert("Hello!"), and see if you can interact with anything else on your webpage).

How can we then run asynchronous code? There must be a mechanism for this inside the browser, right? The browser thankfully keeps track of the events that have registered but are yet to be processed, inside the event queue.

Event Handling - Event Queue — Event Handling – Event Queue

All generated events (either user events or server events) are stored in the event queue, in the order that they have been detected in the browser. Based on the diagram above we can determine the handling process of event registration:

The browser first stacks the event queue while parsing our code, looking for any asynchronous calls
Then it checks the head of the event queue for any possible events
If no events happen, the browser will continue to check
If there is an event on the head of the event queue, the browser will take that event and execute the handler associated to that particular event.

A note to keep here is that while there might be multiple events on the queue, only one event can be handled at any moment. We need to be extra careful about the way we handle events, in order to keep our applications running and responsive.

Event handling – How are event handlers registered?

In order to execute a function where an event of interest happens, we need to notify the browser that we are interested in that event. We do this by registering an event handler. We can do this in two ways:

Assigning functions to special properties
usign the build in addEventListener method

We can use special properties found inside objects, such as the window object. For example, we can use onload by writing window.onload = function() {}, in order to process load events. We can also register the click event on the document’s body by writing document.body.onclick = function(){}.

For an alternative to special properties, we can use the addEventListener method, and we can use it to register as many event-handler functions as we need.

<script>
    document.addEventListener("mousemove", mouseMoseFunc);
    document.addEventListener("click", clickFunc);
    button.addEventListener("mouseout", mouseOutFunc);

    function mouseMoveFunc() {
        console.log("Mouse moved!");
    }

    function clickFunc() {
        console.log("Mouse clicked!");
    }

    function mouseOutFunc() {
        console.log("Mouse no longer on the element!");
    }
</script>

In the example above we used the addEventListener method on the document element to specify the event and the handler that we want to use. Whenever the mouse is moved, our browser will display the message "Mouse moved!" inside our console. The same thing happens whenever we click the mouse, only thing is that we now will call a different event handler function, which will display a different text saying "Mouse clicked!".

The third example will target an element, for example, a button. Whenever our mouse is focused on the button, nothing will happen. But if we move the focus from the button – then the event handler function mouseOutFunc will log the text that the mouse is no longer focused.

addEventListener

target.addEventListener(event, function, useCapture)

Let us check the syntax of the addEventListener method.

To register an event we need a target for that event. The target can be any element inside our DOM that supports events.

Event is the type of event we want to register the handler. Here is an extensive list of them.

The function is the listener object that will run once this specific event occurs. They’re either a regular function or an object implementing the EventListener interface.

useCapture is an optional flag that indicates whether events of this type will be dispatched to the listener before the EventTarget in the DOM tree.

Final Words

We did a quick explanation of events. And with this article, we finished this series on browser parsing and DOM creation.

For more articles please click below, or check the blog.

Facebook Tweet Pin LinkedIn