javascript - How does the browser know that an event has occurred?

Question

Recently, I have been studying in depth the issues related to the capture and bubbling of events:
I have this understanding, I don’t know if it is right or not, you can take a look.

The event propagation mechanism is divided into three stages: capture stage, reaching target stage, and bubbling stage. I think the purpose of this propagation mechanism is to monitor whether an event occurs, what type of event it occurs, and where the event occurs. The so-called event capture means that the browser is looking for whether an event has occurred. As for the processing time after the event occurs, it is achieved by registering the event processing function and the last parameter of addEventListener().

But if I follow this idea, there will be such a problem.

For example, I have a piece of code like this

    <p>
        <a id="btn" href="http://www.baidu.com/">
    button
        </a>
    </p>
    <script>
     var btn=document.getElementById('btn');
     var disableClickHandler =  function(event){
        console.log('1');
        event.preventDefault();
        event.stopPropagation();
     };
    document.removeEventListener('click',disableClickHandler,true);
    btn.onclick = function () {
        console.log('success');
    }
    </script>
    

I use the capture method to handle events, and prevent the event from continuing to propagate in the event handling function. This seems natural, but my question is, if the event has stopped propagating, how does the browser know where the event occurred? How does it know that an event has occurred? If it doesn't know that an event has occurred, how can it execute the corresponding event handler?

Answer 1

Your conflict is due to an incorrect understanding of the capture phase. Don’t be bothered by the name. Capturing and bubbling are on the same level. One works from the outside in and the other works from the inside out. So the event interrupt is interrupted during the propagation process, not before the propagation.

Answer 2

If you are talking about how to get it. I think the answer lies in JavaScript Event Loop

Links: https://developer.mozilla.org...

Answer 3

The code is executed by the browser for you, the event is detected by the browser, and then the browser helps you execute the event you specified.

So you ask, how does the browser know?

Answer 4

This is because JavaScript is a directive language. What is a directive language? That is, every JavaScript statement you write is an instruction to notify the browser to do something. For example, the simplest document.getElementById() actually notifies the browser to obtain the relevant DOM, rather than JavaScript itself. The same goes for event handling.

Answer 5

Click to execute disableClickHandler, preventing event propagation, so...

Answer 6

If the event has stopped spreading, how does the browser know where the event occurred?

It doesn’t want to know.

How does it know that an event has occurred?

It doesn’t know either.

If it doesn’t know that an event has occurred, how can it execute the corresponding event handler?

It said it was lazy.