javascript - Javascript 如何控制事件

Question

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

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

(来自w3school)

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

任何阅读链接也可以

Answer 1

浏览器负责收集页面上出现的事件。当为给定操作添加事件监听器时，监听器的回调将添加到事件循环中。事件循环是一个无限循环，不断检查是否有事情要做(以 CPU 优化的方式)。事件循环有两个主要任务:

• 如果 DOM 或 CSSOM 发生更改，则渲染页面
• 当某些特定操作发生时执行回调

重要的是要知道 JavaScript 是单线程的，这意味着如果有一个长时间运行的回调，浏览器将无法重新呈现页面，因此页面就会卡住。

了解幕后情况的另一种方法是打开 Chrome 开发工具并转到性能面板。您可以在那里准确地找到与页面交互时发生的情况:

有几种方法可以添加事件监听器:

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

如果您想了解有关事件循环的更多信息，这里有一些很好的资源:

• Philip Roberts: What the heck is the event loop anyway?
• Jake Archibald on ‘The Event Loop’ (更高级)

还有一个非常好的免费类(class)，它解释了很多有关浏览器如何工作的内容，最重要的是向您展示如何提高网站的性能: Browser Rendering Optimization