Javascript如何控制事件

Question

假设我有一个使用onmouseover事件的简单代码

    <div onmousemove="myMoveFunction()">
      <p id="demo">I will demonstrate onmousemove!</p>
    </div>

（来自w3school）

我想问一下，Javascript如何知道鼠标在那个div上？ 或当我们使用onclick时，Js如何知道按钮已被单击。 是否有自动事件监听器？ 或是否有任何循环在后台持续控制事件的变化？ 请帮助我，我很困惑。

任何要阅读的链接也可以

Answer 1

浏览器负责收集页面上显示的事件。 当为给定操作添加了事件侦听器时，该侦听器的回调将添加到事件循环中。 事件循环是一个无限循环，不断检查是否有事情要做（以cpu优化的方式）。 在事件循环上，有两个主要任务：

重要的是要知道javascript是单线程的，这意味着如果存在长时间运行的回调，浏览器将无法重新渲染页面，因此页面只会冻结。

了解幕后情况的另一种方法是打开chrome开发工具并转到性能面板。 您可以在其中找到与页面互动时的确切情况：

有几种添加事件侦听器的方法：

在HTML中使用on[eventname]=action ，即<div onmousemove="myMoveFunction()">
在javascript中，通过将函数分配给on [eventname]属性，即windows.onload = () => alert("hello");
在JavaScript中使用addEventListener()方法，例如element.addEventListener("click", () => alert("hello"));

如果您想了解更多有关事件循环的信息，请参考以下资源：

另外还有一门很好的免费课程，介绍了浏览器的工作原理，最重要的是向您展示了如何提高网站的性能：浏览器渲染优化

Answer 2

当您使用例如<div onmousemove="myMoveFunction()"> ，当浏览器在页面加载时读取DOM时，它会在幕后为事件侦听器生成代码，并且没有太多其他内容了。