JavaScript event capture bubbling and capture details

JavaScript event capture bubbling and capture details

1. Event Flow

In JavaScript , the event flow refers to DOM event flow.

1. Concept

The event propagation process is DOM event flow.
The process of event objects propagating in DOM is called "event flow".
For example: to turn on a computer, you first have to find your computer, then find your power button, and finally press the power button by hand. Complete the event of turning on the computer. This whole process is called event flow.

2. DOM event flow

DOM events also have a process. There are three stages from event triggering to event response.

  • Event capture phase
  • At the target stage
  • Event bubbling phase

In the above example, the process of turning on the computer is like the event flow in JavaScript . The process of finding the power button is the process of event capture. After you find the power button, you press the power button with your hand. The process of choosing to press the power button by hand is in the target stage. Pressing the power button, the computer starts to start up, which is the bubbling of the event. The order is capture first and then bubbling.

Now that we understand event sourcing, let’s look at its three processes!

Event Capture:

Note: Because event capture is not supported by older browsers (IE8 and below), event handlers are usually triggered during the bubbling phase in practice.

Event capture is the first step in the event flow.
When a DOM event is triggered (the element that triggers the DOM event is called the event source), the browser will propagate the event from the root node to the inside. That is, events flow from the root node of the document to the target object node. It passes through various levels of DOM nodes on the way and finally reaches the target node to complete event capture.

Target phase:

When the event reaches the target node, the event enters the target phase. The event is triggered on the target node.
That is, the event is propagated to the lowest-level element that triggers the event.

Event bubbling:

Event bubbling is in the opposite order of event capturing. The order of event capture is from outside to inside, and event bubbling is from inside to outside.
When the event is propagated to the target stage, the element in the target stage will propagate the received time upward, that is, it will propagate in reverse along the path captured by the event, and propagate upward step by step to the ancestor elements of the element. Until the window object.

Let's look at an example. Clicking box3 will trigger the click events of box2 and box1.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript Event Bubbling</title>
</head>
<style type="text/css">
    #box1 { background: blueviolet;}
    #box2 {background: aquamarine;}
    #box3 {background: tomato;}
    div { padding: 40px; margin: auto;}
</style>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        window.onload = function () {
            const box1 = document.getElementById('box1')
            const box2 = document.getElementById('box2')
            const box3 = document.getElementById('box3')
            box1.onclick = sayBox1;
            box2.onclick = sayBox2;
            box3.onclick = sayBox3;
            function sayBox3() {
                console.log('You clicked the innermost box');
            }
            function sayBox2() {
                console.log('You clicked the middle box');
            }
            function sayBox1() {
                console.log('You clicked the outermost box');
            }
        }
    </script>
</body>

</html>

At this time, the propagation order of click capture is:
window -> document -> <html> -> <body> -> <div #box1> -> <div #box2> -> <div #box3>
At this time, the propagation order of click bubbling is:
<div #box3> -> <div #box2> -> <div #box1> -> <body> -> <html> -> document -> window

Modern browsers all start capturing events from window object, and the last stop of bubbling is also window object. IE8 and below browsers will only bubble to document object.
Event bubbling: It is determined by the HTML structure of the element, not by the position of the element in the page, so even if the element is out of the scope of the parent element by positioning or floating, the bubbling phenomenon still exists when the element is clicked.

Now that we know the three stages of event flow, what can we do with this feature?

2. Event delegation

Imagine a scenario where you have a bunch of <li> tags under a <ul> tag and need to bind onclick events to all the <li> tags. We can solve this problem with a loop, but is there an easier way?
We can add an onclick event to the common parent element <ul> of these <li> . Then, when any <li> tag inside triggers an onclick event, onclick event will be propagated to <ul> through the bubbling mechanism for processing. This behavior is called event delegation, <li> uses event bubbling to delegate events to <ul> .
You can also use event capture to delegate events. The usage is the same, just in reverse order.

  <ul id="myUl">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    ...
  </ul>

It may still be a little hard to understand. To put it simply, it is to use event bubbling to delegate events on an element to its parent.

To give an example from real life, on Double Eleven, express deliveries arrive. The courier usually delivers the express to every household door-to-door, which is inefficient. The courier came up with an idea to put all the express deliveries in a community in a courier station inside the community and delegate the delivery of the express. The recipients in the community can go to the courier station to pick up their express deliveries using the pickup code.
Here, the courier delivering the package is an event, the recipient is the element that responds to the event, and the post station is equivalent to the proxy element. The recipient goes to the post station to pick up the package with the receipt code, which is the event execution. The proxy element determines whether the current response event matches the specific event triggered.

But what are the benefits of doing this?

1. Advantages of event delegation

Event delegation has two benefits

  • Reduce memory usage
  • Dynamically binding events

Reduce memory consumption and optimize page performance

In JavaScript , each event handler is an object, and objects will occupy page memory. The more objects in memory, the worse the page performance will be. In addition, DOM operations will cause the browser to rearrange and redraw the page (if this is not clear, you can learn about the page rendering process). Too many DOM operations will affect the performance of the page. One of the main ideas of performance optimization is to minimize reflow and repaint, that is, to reduce DOM operations.

In the above example of binding the onclick event to the <li> tag, using event delegation means there is no need to bind a function to each <li> tag. You only need to bind it once to the <ul> tag. When there are a large number of li tags, this will undoubtedly reduce a lot of memory consumption and save efficiency.

Dynamically bind events:

If the child element is uncertain or dynamically generated, you can monitor the parent element instead of monitoring the child element.
Still in the above example of binding the onclick event to the <li> tag, many times the number of these <li> tags is not fixed, and some <li> tags will be added or deleted based on user operations. Each time you add or delete a tag, you must rebind or unbind the corresponding event to the newly added or deleted element.

By using event delegation, you don't have to operate on each <li> . You only need to bind it once to <ul> . Because the event is bound to <ul> , the <li> element cannot affect <ul> . The execution of the <li> element is matched in the process of actually responding to the execution of the event function. Therefore, using event delegation can reduce a lot of repetitive work when dynamically binding events.

Now that we know the advantages of event delegation, how do we use it?

2. Use of event delegation

The use of event delegation requires addEventListener() method for event monitoring.
The method registers the specified listener to the object that calls the function. When the object triggers the specified event, the specified callback function will be executed.

usage:

element.addEventListener(eventType, function, useCapture);
parameter Required/Optional describe
eventType Required Specifies the type of event.
Function Required Specify the callback function after the event is triggered.
useCapture Optional Specifies whether the event is executed in the capturing phase or the bubbling phase.

The third parameter useCapture is a Boolean type, the default value is false

  • true - indicates that the event is executed during the capture phase
  • false- indicates that the event is executed in the bubbling phase

Take a look at the following example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Event Delegation</title>
</head>

<body>

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

  <script>
    const myUl = document.getElementsByTagName("ul")[0];

    myUl.addEventListener("click", myUlFn);

    function myUlFn(e) {
      if (e.target.tagName.toLowerCase() === 'li') { // Determine whether it is the element to be clicked console.log(`You clicked ${e.target.innerText}`);
      }
    }

  </script>
</body>

</html>

Note: This is a general event delegation method, but there is a problem with this writing method. That is, when there are child elements in _<li>_, clicking on this child element will not trigger the event. This question is a pitfall.

Event bubbling is sometimes really useful, but sometimes it can be annoying. Can you cancel it when you don't need it?

3. Prohibit event bubbling and capture

Note: Not all events will bubble, such as focus, blur, change, submit, reset, select, etc.

To disable bubbling and capturing, you can use the stopPropagation()。
stopPropagation() stops the further propagation of the current event in the capture and bubbling phases.
This is a method to prevent the event from bubbling. Bubbling occurs, but the default event will still be executed when you call this method.
If you click on an a tag, the a tag will jump.

It is also very simple to use, with no return value and no parameters.

event.stopPropagation();

Please see the following example, which is a slight modification of the above event bubbling example.

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        const box1 = document.getElementById('box1')
        const box2 = document.getElementById('box2')
        const box3 = document.getElementById('box3')
        box1.onclick = sayBox1;
        box2.onclick = sayBox2;
        box3.onclick = sayBox3;
        function sayBox3() {
            console.log('You clicked the innermost box');
        }
        function sayBox2(e) {
            console.log('You clicked the middle box');
            e.stopPropagation(); //Disable event capture and bubbling}
        function sayBox1() {
            console.log('You clicked the outermost box');
        }
    </script>

When the event bubbles to box2 , the function sayBox2 is called, and e.stopPropagation(); is called to stop bubbling.

This is the end of this article about JavaScript event capture bubbling and capture details. For more relevant JavaScript event capture bubbling and capture content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

IV. References

MDN Chinese version https://developer.mozilla.org/zh-CN/
Zhihu https://zhuanlan.zhihu.com/p/26536815

You may also be interested in:
  • Learn more about the most commonly used JavaScript events
  • Analysis of JavaScript's event loop mechanism
  • Detailed explanation of js event delegation
  • A brief analysis of event bubbling and event capture in js
  • JavaScript event loop case study
  • Detailed explanation of Javascript event capture and bubbling methods

<<:  14 Ways to Create Website Content That Engages Your Visitors

>>:  Web page html special symbols html special characters comparison table

Recommend

The best way to start a jar package project under Centos7 server

Preface Everyone knows how to run a jar package o...

The solution to the page not refreshing after the route changes after react jumps

Table of contents question Solution question Ther...

A Brief Analysis of MySQL - MVCC

Version Chain In InnoDB engine tables, there are ...

3 methods to restore table structure from frm file in mysql [recommended]

When mysql is running normally, it is not difficu...

Vue component library ElementUI implements table loading tree data tutorial

ElementUI implements a table tree list loading tu...

Vue.js implements calendar function

This article example shares the specific code of ...

Summary of methods to prevent users from submitting forms repeatedly

Duplicate form submission is the most common and ...

How to add abort function to promise in JS

Table of contents Overview Promise Race Method Re...

Detailed discussion of MySQL stored procedures and stored functions

1 Stored Procedure 1.1 What is a stored procedure...

Mysql5.6.36 script compilation, installation and initialization tutorial

Overview This article is a script for automatical...

Detailed explanation of encoding issues during MySQL command line operations

1. Check the MySQL database encoding mysql -u use...

Detailed explanation of the use of router-view components in Vue

When developing a Vue project, you often need to ...

JavaScript implements Tab bar switching effects

Here is a case that front-end developers must kno...

Install Apache2.4+PHP7.0+MySQL5.7.16 on macOS Sierra

Although Mac systems come with PHP and Apache, so...

Understanding MySQL deadlock routines through unique index S lock and X lock

In Beginners' Understanding MySQL Deadlock Pr...