JavaScript 内部的事件处理是如何工作的？答案

【问题标题】：How does event handling work internally within JavaScript?JavaScript 内部的事件处理是如何工作的？
【发布时间】：2011-04-22 17:54:44
【问题描述】：

我知道您编写函数并将它们附加到事件以处理它们。

onClick 处理程序在哪里定义，JS 引擎如何知道在用户单击时触发 onClick 事件？

感谢任何关键字、设计模式、链接等。

更新

在这里我觉得有用的聚合链接：

【问题讨论】：

【解决方案1】：

SpiderMonkey 本身没有任何涉及事件处理的功能。事件是纯粹的 DOM 事物。

点击事件由浏览器代码（嵌入 SpiderMonkey 的东西）触发，而不是由 SpiderMonkey 本身触发。请参阅 http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/content/events/src/nsEventStateManager.cpp 了解负责调度点击等内容的代码。

浏览器还定义了 setter 方法，这些方法将赋值给 onclick 属性并将其转换为事件侦听器注册。请参阅从 nsEventReceiverSH::SetProperty 调用的 http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/dom/base/nsDOMClassInfo.cpp#l7624 并处理名称（此代码中为 id）通过 IsEventName 测试的属性。

当注册事件侦听器并触发事件时，事件调度程序管理对侦听器的调用；您找到的 nsJSEventListener 链接是将 C++ HandleEvent 调用转换为对 JS 函数的调用的粘合剂。

因此，在您的情况下，您需要某种针对侦听器的注册/注销机制，然后您的实现将触发事件并将它们分派给侦听器。你如何做这最后一部分是非常开放的。由于需要实现 DOM 事件规范，Gecko 实现有很多限制，但您应该能够做一些更简单的事情。

【讨论】：

【解决方案2】：

HTML 使用 sink/bubble 事件传播模式：http://catcode.com/domcontent/events/capture.html
有“物理”事件（鼠标、键盘）和逻辑/综合事件（焦点、点击、value_changed 等）
onClick 是一个逻辑事件 - 由鼠标、触摸和/或键盘事件生成。
鼠标（或手指触摸）发起的点击事件是鼠标向下、移动和向上事件的结果。请注意，鼠标向下、移动和向上是下沉/冒泡事件。这些“原始”事件中的目标元素将成为点击事件的目标（或源）。如果鼠标按下/向上事件具有不同的目标（DOM 元素），则使用它们的共同父级。
鼠标向下、移动和向上事件的顺序可能会产生不同的逻辑事件：单击、滑动/滚动等。

我相信这是基本概念的完整列表。

【讨论】：