This is the 25th day of my participation in the August Challenge

Understand the flow of events

Event flow is the order in which a page receives events. There are generally two types of event flow: event bubbling and event capture. It is actually the order in which events occur.

The event bubbling

Event bubbling is propagating up from the deepest node in the document, starting at the bottom and working its way up to the Window object. Let’s write an example

<! DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flow of events</title>
</head>
<body>
    <div id="box">
        <p >
            <button>Point me off up</button>
        </p>
    </div>
</body>
</html>
Copy the code

In the very simple example above, the event bubbles from button => p => div => body => HTML

graph TD
button --> p --> div --> body -->html

I briefly wrote it using the flow chart provided by the Nuggets, and you can see that it is in this order, which is very easy to understand.

Event capture

Event capture means from the outside in, which is to get the outer elements and then access the bottom content layer by layer. In fact, its flow is exactly the opposite of event bubbling. So we could rewrite it using the example above.

It gets it as HTML => body => div => P => button

graph TD
 html --> body  --> div --> p -->button

Since the previous version did not support event capture, we rarely use event capture in practice, and generally use event bubbling to handle operations.

Flow of events

DOM specification specifies that the event flow is divided into three stages: event capture => reach the target element => event bubble, where event capture is the first to occur, and the latest to occur is the event bubble, if we want to do some click or other actions in response to the event, we must do the corresponding before the event bubble.

The DOM2 Events specification states that the capture phase will not hit the event target, but in the browser, the target will trigger the event in the capture phase, so we have two opportunities to operate on clicks or other Events.

Note that IE8 and previous versions do not support DOM event streams