javascript - 浏览器是如何得知一个事件已经发生了的？

Question

最近在深入学习事件的捕获和冒泡这相关的问题：
我有这样一个认识，不知道对不对，各位可以看一看。

事件的传播机制分为三个阶段：捕获阶段、到达目标阶段、冒泡阶段。我认为这套传播机制存在的一个意义来监听究竟有没有事件发生，事件发生的类型是什么、事件发生在哪里。所谓的事件捕获，就是浏览器在查找有没有事件发生，至于事件发生之后的处理时机，则是通过注册事件处理函数，addEventListener()的最后一个参数实现的。

但是我按照这样的思路来走的话，就有了这样的一个问题。

比如我有这样一段代码

    <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>
    

我采用捕获的方式来对事件处理，在事件处理函数中阻止了事件继续传播。这看起来很自然，但我的问题是，如果事件已经停止了传播，浏览器又是怎么知道这个事件发生的位置呢？它又是怎么知道一个事件已经发生了呢？如果它不知道一个事件已经发生了，又怎么会执行对应的事件处理程序呢？

Answer 1

你的矛盾是因为对捕获阶段的不正确理解。别被名字困扰了，捕获跟冒泡是同个层面的东西，一个自外向内，一个自内向外。所以事件中断是在传播过程中中断，而不是在传播之前。

Answer 2

如果你说的是如何获取的。 我觉得答案在 JavaScript Event Loop

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

Answer 3

代码是浏览器帮你执行的，事件发生是浏览器检测到的，然后是浏览器帮你执行你制定的事件。

所以你问浏览器是怎么知道的？

Answer 4

这是因为，javascript是一种指令性语言，什么是指令语言呢？就是你编写的每一条javascript语句都是一条指令，通知浏览器去做某些事，比如，最简单的document.getElementById(),实际上也是通知浏览器去获取相关dom，而非javascript自己做的。事件处理也是如此。

Answer 5

点击执行disableClickHandler，阻止了事件传播，so.....

Answer 6

如果事件已经停止了传播，浏览器又是怎么知道这个事件发生的位置呢?

它不想知道。

它又是怎么知道一个事件已经发生了呢？

它也不知道。

如果它不知道一个事件已经发生了，又怎么会执行对应的事件处理程序呢？

它说它很懒。