Spirit takes you through event capture and bubbling mechanisms


DOM standard event model

In the DOM standard event model, events are captured first and bubble when they reach the target stage

Capture stage = = > target stage = = > bubbling stage


Target and non target elements

Before introducing event capture and event bubbling

Let’s first understand what target elements and non target elements mean

  • Target element: it is the element that we currently trigger the event
  • Non target element: it is in the capture phase or bubble phase because it is boundEvents of the same typeAnd trigger elements
  • Each DOM element can bind multiple events, provided thataddEvenetListenerTo add events, even the same events can be bound repeatedly

Event capture

Start from the root element of the page and look down layer by layer

Can you look at the picture I drew on the top

Event Bubbling

Look up from the target element

You can see my picture at the top


addEventListenerYou can pass in the third parameter usecapture, which is false by default

In fact, there is also an option parameter that can be passed, but I didn’t look at it carefully, because I have read it and I don’t know the application scenario, so I plan to have a demand. I’ll look at it later

  • WhenuseCaptureWhen the parameter is false, the default is that event listening will not be triggered in the capture phase, but will be triggered in the bubbling phase
  • WhenuseCaptureWhen the parameter is true, event listening starts from the capture phase, but the bubbling phase will not trigger event listening


Now let’s analyze a problem. The layout code is below

HTML code


    .c {
        width: 200px;
        height: 200px;
        background-color: orange;


JS code

const a = document.querySelector(".a");
const b = document.querySelector(".b");
const c = document.querySelector(".c");

a.addEventListener("mousedown", () => {
    Alert ("pop up a");
}, false)
b.addEventListener("mousedown", (e) => {
    Alert ("pop up B");
}, true)

c.addEventListener("mousedown", (e) => {
}, true)
c.addEventListener("mousedown", (e) => {
}, false)
c.addEventListener("mousedown", (e) => {
}, false)
c.addEventListener("mousedown", (e) => {
}, true)


  1. From the perspective of HTML, the nesting level isa>b>c

  2. Now let’s look at the JS code

  3. a. B and C are boundmousedownEvent, let’s take a closer look. What is the execution order of this?

  4. I can analyze it for you

  5. For the same element, bind multiple events, whether the same event or different events, as long as the listener of the corresponding event is triggered, it will execute

  6. What is the execution order of the same event?

  7. The execution order of the same event is executed according to the defined order, provided that usecapture is consistent

  8. When we click on the target element, we are in the target phase, not in the bubble phase or capture phase, please keep this sentence in mind

  9. In the target phase, when usecapture has both true and false phases
    At this time, we can understand that the target element actually forms something similar to the DOM event model
    In this model, there are also capture phase and bubble phase
    Therefore, if true, the capture phase will be executed first, in the order defined
    Then execute the fasle phase, that is, the bubbling phase, in the order of events

  10. Therefore, when the target phase is executed, the execution sequence of so many events ismousedown2 mousedown4 mousedown1 mousedown3

  11. So now we can look at the whole HTML page. What is the execution order?

  12. In fact, it is the same as the implementation of the target phase
    Of non target elementsuseCaptureWhen true, the capture phase will first perform event listening
    Of non target elementsuseCaptureIf false, event listening will be performed in the bubbling phase after the execution of the capture phase and the target phase
    For example, if I werebIt is also bound with multiple events of the same typetruehavefalseIn this case, it will execute firsttrueoffalseI won’t waittrueExecute immediately after execution, but wait until the target phase is completed before continuing
    If you don’t believe it, you can try it yourself

  13. So the overall execution order is

    b mousedown2 mousedown4 mousedown1 mousedown3 a


I’m afraid people still don’t understand what I mean
So I drew this picture and introduced the process in detail


Recommended Today

Apache sqoop

Source: dark horse big data 1.png From the standpoint of Apache, data flow can be divided into data import and export: Import: data import. RDBMS—–>Hadoop Export: data export. Hadoop—->RDBMS 1.2 sqoop installation The prerequisite for installing sqoop is that you already have a Java and Hadoop environment. Latest stable version: 1.4.6 Download the sqoop installation […]