谁在 HTML 标签上监听 DOM 事件（例如 onclick）？答案

【问题标题】：Who listens to the DOM events (such as onclick) on HTML tags?谁在 HTML 标签上监听 DOM 事件（例如 onclick）？
【发布时间】：2020-10-10 03:25:00
【问题描述】：

我正在学习客户端 JavaScript，但我对 HTML 元素如何侦听 DOM 事件并执行回调有点困惑？

<html>
  <head>
    <title>A page for you!</title>
  </head>
  <body>
    <input type="text" id="text-field" value="" />
    <button id="submit-button">Submit me!</button>
    <script type="application/javascript">
      const textField = document.getElementById("text-field");
      const button = document.getElementById("submit-button");
      const showValue = () => {
        let inputValue = textField.value;
        alert(inputValue);
      };
      button.onclick = showValue;
    </script>
  </body>
</html>

例如，我确实将 showValue 分配给了 button.onclick 属性。但是谁设置监听器并执行button.onclick？

我想某处一定有一些 JavaScript 代码，它会像


const button.listenToOnclick = function() {
  // wait until user clicks
  if (clicked && button.onclick) {
    button.onclick();
  }
}
button.listenToOnClick(); // async and waits for the click to execute onclick

此代码是否嵌入在 HTML 按钮标签中？

【问题讨论】：

是的； onclick 属性行为内置于浏览器的 DOM 实现中。如果您对更多细节感兴趣，developer.mozilla.org/en-US/docs/Web/Guide/Events/… 将是一篇好文章。
<button> 标签将监听 onClicks，然后它会检查元素是否有 onClick，它也会检查按钮上的监听器，使用监听器比使用 @987654332 更好@在元素上，。因为这允许每个元素有多个侦听器，而不仅仅是一个。
button.onclick = showValue; sets 使用其onclick 属性直接在元素上添加“事件处理程序”。当该特定对象上发生click 事件时，将调用单个指定函数。推荐的替代方法是使用“事件侦听器”。请参阅 MDN 了解它们的工作原理：developer.mozilla.org/en-US/docs/Web/API/EventTarget/…（也许查看这篇文章以了解有关差异的一些想法：dillionmegida.com/p/inline-events-vs-add-event-listeners）

标签： javascript html dom

【解决方案1】：

每个 HTML 元素本质上都是一个对象。这些对象中的每一个在构造时都有一组属性，使其本质上是一个对象。与创建文本字段所固有的 .value 相同，您还可以使用多个其他功能，例如 .onClick。

当您将函数附加到事件时，您正在访问此预烘焙的功能。

要回答您的问题，按钮本身正在监听 onClick 函数的触发。但是将信息发送到 Button 或 DOM 的是 Window。 Window 是在浏览器中运行的 Javascript、HMTL 和 CSS 的实例。

所以发生的情况是窗口知道您点击了以及点击了哪里。然后它将该信息发送到 dom 并说“那里有什么吗？”如果有，它会说“它在监听点击事件吗？”如果满足这两个条件，则触发 onClick 事件。

【讨论】：

当你说按钮本身在监听的时候，是不是对应的DOM对象的<button></button>标签或者更多？
标签只是 DOM 内部按钮对象的占位符。它的功能与您订购芝士汉堡的功能相同。你说“我想要一个芝士汉堡”，然后餐厅会给你一个。在这种情况下，您使用 HTML 说“我想要一个按钮”，然后 DOM 为您创建一个按钮对象，其中包含它固有的所有属性。

【解决方案2】：

我猜您正在寻找的实体是我们心爱的浏览器。每个浏览器都有engines，它们负责执行 JavaScript、渲染布局、处理用户 DOM 交互、安全问题等等。

例如，Firefox 使用引擎 Gecko 来渲染页面，引擎 SpiderMonkey 来处理 JavaScript。 Chrome 使用引擎 Blink 进行渲染，使用 V8 进行 JavaScript（Node.js 的起源引擎）。

【讨论】：