Detailed explanation of JS browser event model

What is an event

I think you may have heard of event-driven, but what exactly is event-driven? Why is the browser event-driven?

In simple terms, event-driven means that everything is abstracted into events.

• A click is an event
• Keyboard press is an event
• A successful network request is an event
• Page load is an event
• Page error is an event

The browser relies on events to drive the APP to run. If there is no event-driven, the APP will run directly from beginning to end and then end. Event-driven is the cornerstone of the browser.

A Simple Example

In fact, the traffic light in reality is a kind of event. It tells us whether it is in the red light state, green light state, or yellow light state. We need to complete some operations based on this event. For example, we need to wait for red and yellow lights, and we can cross the road when the light is green.

Let's take a look at the simplest browser event:

HTML code:

<button>Change color</button>

js code:

var btn = document.querySelector('button');

btn.onclick = function() {
  console.log('button clicked')
}

The code is very simple. We register an event on the button. The handler of this event is an anonymous function we defined. When the user clicks the button that has been registered for the event, the anonymous function we defined will be executed.

How to bind events

We have three ways to bind events: inline binding, direct assignment, and using addEventListener.

Inlining this method is highly not recommended

HTML code:

<button onclick="handleClick()">Press me</button>

Then write in the script tag:

function handleClick() {
  console.log('button clicked')
}

Direct assignment

Just like the example I gave above:

var btn = document.querySelector('button');

btn.onclick = function() {
  console.log('button clicked')
}

This approach has two disadvantages

You cannot add multiple handlers of the same type.

btn.onclick = functionA;
btn.onclick = functionB;

This way only functionB is valid, which can be solved by addEventListener.

It is not possible to control at which stage the execution will take place. This will be discussed later when capturing/bubbling events. This can also be solved by addEventListener.

Therefore, addEventListener was born, which is also the currently recommended way of writing.

addEventListener

The third parameter of the old version of addEventListener is bool, while the third parameter of the new version is object, which is convenient for subsequent expansion and carries more functions. Let's focus on it.

addEventListener can bind events to Element, Document, Window, and even XMLHttpRequest. When the specified event occurs, the bound callback function will be executed by a certain mechanism, which we will talk about later.

grammar:

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // Gecko/Mozilla only

type is the event type you want to bind, common ones are click, scroll, touch, mouseover, etc. The third parameter of the old version is bool, indicating whether it is the capture phase. The default is false, that is, the default is the bubbling phase. The new version is an object that contains capture (same functionality as above), passive and once. Once is used to determine whether to execute only once. If passive is specified as true, preventDefault() will never be executed, which is important in achieving smooth scrolling effects. For more information, see Improving scrolling performance with passive listeners.

Events in the framework

In fact, we now use frameworks to write code in most cases, so the above situation is actually very rare in reality. We often see events encapsulated by frameworks, such as react's synthetic events. If you are interested, you can read these articles.

• React SyntheticEvent
• What are the advantages of Vue and React respectively? What is the core difference between the two?

Although we rarely come into contact with native events, it is still necessary to understand event objects, event mechanisms, event agents, etc., because the framework's event system is at least consistent in this respect, which we will talk about next.

Event Object

All event handling functions are accompanied by an event object when executed by the browser. For example:

function handleClick(e) {
  console.log(e);
}  

btn.addEventListener('click', handleClick);

This e is the event object. This object has some very useful properties and methods. Here are some commonly used properties and methods.

property

• target
• x, y and other position information
• timeStamp
• eventPhase

method

• preventDefault is used to prevent the default behavior of the browser, such as the a tag will jump by default, the form will be verified by default and send a request to the address specified by action, etc.
• stopPropagation is used to stop the event from bubbling further, which will be mentioned later when discussing event propagation.

Event Propagation

As mentioned earlier, events are bound to the bubbling phase by default. If you explicitly set useCapture to true, they will be bound to the capture phase.

Event capture is very interesting, so much so that I often ask questions about events and add some event propagation mechanisms, and ask candidates to answer them. This can really reflect a person's level. Understanding the propagation mechanism of events is very helpful for some specific problems.

When an event bound to an Element is triggered, it actually goes through three stages.

Phase 1 - Capture Phase

Starting from the outermost layer, i.e. the HTML tag, check whether the current element has a corresponding capture phase event bound to it. If so, execute it; if not, continue to propagate inside. This process is executed recursively until the element that triggers the event is reached.

pseudocode:

function capture(e, currentElement) {
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => fn(e))
    }


    // pass down
    if (currentElement !== e.target) {
        // getActiveChild is used to obtain the child node capture(e, getActiveChild(currentElement, e)) on the current event propagation link
    } else {
        bubble(e, currentElement)
    }
}

// This Event object is created by the engine capture(new Event(), document.querySelector('html'))

Second stage - target stage

This has been mentioned above and is omitted here.

The third stage - bubbling stage

Starting from the element that triggers this event, check whether the current element has a bound corresponding bubbling stage event. If so, execute it; if not, continue to propagate it. This process is recursively executed until the HTML is reached.

pseudocode:

function bubble(e, currentElement) {
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => fn(e))
    }
    // returning
    if (currentElement !== document.querySelector('html')) {
        bubble(e, currentElement.parent)
    }
}

The above process is represented by a diagram:

If you don't want the event to continue bubbling, you can use the stopPropagation I mentioned earlier.

pseudocode:

function bubble(e, currentElement) {
    let stopped = false;
    function cb() {
        stopped = true;
    }
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => {
            fn({
                ...e,
                stopPropagation: cb
            });
            if (stopped) return;
        })
    }
    // returning
    if (currentElement !== document.querySelector('html')) {
        bubble(e, currentElement.parent)
    }
}

Event Delegation

Using the event bubbling mechanism mentioned above, we can choose to do some interesting things. For example:

We have a list like the following, and we want to output which element was clicked when clicking the corresponding list item.

HTML code:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JS code:

document.querySelector('ul').addEventListener('click', e => console.log(e.target.innerHTML))

Online address, as mentioned above, addEventListener will be bound to the bubbling stage by default, so the event will start from the target stage and bubble to the outer layer to the ul to which we bound the event. In ul, we can get which element triggered it through the target attribute of the event object.

"The event will start from the target phase" does not mean that the event has no capture phase, but that we did not bind the capture phase, so I omitted it in the description.

We only bind the event handling function to the outer ul, but you can see that when the li is clicked, the corresponding li content (1, 2, 3 or 4) will actually be printed. We don't need to bind an event handling function to each li, which not only improves the amount of code but also the performance.

We gave this interesting thing a nice name "event proxy". We will often use this technique in actual business, and it is also a high-frequency test point in interviews.

Summarize

Events are not browser-specific and have nothing to do with the JS language, which is why I did not classify them into the JS section. There are event systems in many places, but the event models are not consistent.

What we are talking about today is the browser's event model. The browser is event-driven and abstracts many things into events, such as user interaction, network requests, page loading, errors, etc. It can be said that events are the cornerstone of the normal operation of the browser.

The frameworks we use all encapsulate and process events to varying degrees. In addition to understanding native events and principles, it is sometimes necessary to understand how the framework itself handles events.

When an event occurs, the browser will initialize an event object and then propagate the event object according to a certain logic. This logic is the event propagation mechanism. We mentioned that event propagation is actually divided into three stages, which are the capture stage, the target stage and the bubbling stage in chronological order. Developers can choose to monitor different stages to achieve the desired effect.

The event object has many properties and methods that allow you to read and operate in the event processing function, such as reading the coordinate information of the click, preventing bubbling, etc.

Finally, we use an example to illustrate how to use the bubbling mechanism to implement event delegation.

The above is a detailed explanation of the JS browser event model. For more information about the JS browser event model, please pay attention to other related articles on 123WORDPRESS.COM!