JavaScript 内部的事件处理是如何工作的?

发布于 2024-11-02 15:05:05 字数 828 浏览 6 评论 0原文

具体来说是Spidermonkey

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

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

任何关键字、设计模式、链接等都值得赞赏。

更新

我发现聚合链接在这里很有用:

http://www.w3.org/TR/DOM-Level-2-Events/events.html

https://github.com/joyent/node/blob/master/src/node_events.cc

http://mxr.mozilla.org/mozilla/source/dom/src/events/nsJSEventListener.cpp

Specifically Spidermonkey.

I know you write functions and attach them to events to handle them.

Where is the onClick handler defined and how does the JS engine know to fire onClick events when the user clicks?

Any keywords, design patterns, links, etc are appreciated.

UPDATE

Aggregating links I find useful here:

http://www.w3.org/TR/DOM-Level-2-Events/events.html

https://github.com/joyent/node/blob/master/src/node_events.cc

http://mxr.mozilla.org/mozilla/source/dom/src/events/nsJSEventListener.cpp

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

晨曦÷微暖 2024-11-09 15:05:05

SpiderMonkey 本身没有任何涉及事件处理的东西。事件纯粹是 DOM 的事情。

点击事件是由浏览器代码(嵌入 SpiderMonkey 的东西)触发的,而不是由 SpiderMonkey 本身触发的。请参阅 http://hg.mozilla.org/ mozilla-central/file/e60b8be7a97b/content/events/src/nsEventStateManager.cpp 负责的代码调度诸如点击之类的东西。

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

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

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

SpiderMonkey itself doesn't have anything involving event handling. Events are purely a DOM thing.

The click event is fired by the browser code (the thing embedding SpiderMonkey), not by SpiderMonkey itself. See http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/content/events/src/nsEventStateManager.cpp for the code that's responsible for dispatching things like click.

The browser is also what defines setter methods that take an assignment to the onclick property and turn it into an event listener registration. See http://hg.mozilla.org/mozilla-central/file/e60b8be7a97b/dom/base/nsDOMClassInfo.cpp#l7624 which is called from nsEventReceiverSH::SetProperty and handles properties whose name (id in this code) passes the IsEventName test.

When event listeners are registered and an event is fired, the event dispatcher manages calls to the listeners; the nsJSEventListener link you found is the glue that converts a C++ HandleEvent call into a call to a JS function.

So in your case, you want some sort of registration/unregistration mechanism for listeners and then your implementation will fire events and dispatch them to listeners. How you do this last part is pretty open-ended; the Gecko implementation has a lot of constraints due to needing to implement the DOM Events specification, but you should be able to do something much simpler.

夜无邪 2024-11-09 15:05:05
  1. HTML 使用接收器/气泡事件传播模式:http://catcode.com/domcontent/events/capture。 html
  2. 有“物理”事件(鼠标、键盘)和逻辑/合成事件(焦点、单击、value_changed 等)。
  3. onClick 是逻辑事件 - 由鼠标、触摸和/或键盘事件生成。
  4. 鼠标(或手指触摸)发起的单击事件是鼠标按下、移动和向上事件的结果。请注意,鼠标按下、移动和向上是下沉/冒泡事件。这些“原始”事件中的目标元素将是单击事件的目标(或源)。如果鼠标向下/向上事件具有不同的目标(DOM 元素),则使用它们的共同父级。
  5. 鼠标按下、移动和向上事件的序列可能会产生不同的逻辑事件:单击、滑动/滚动等。

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

  1. HTML uses sink/bubble event propagation schema: http://catcode.com/domcontent/events/capture.html
  2. There are "physical" events (mouse, keyboard) and logical/synthesized ones (focus,click, value_changed, etc.)
  3. onClick is a logical event - generated as a result of mouse, touch and/or keyboard events.
  4. Mouse (or finger touch) originated click event is a result of mouse down, move and up events. Note that mouse down, move and up are sinking/bubbling events. Target element(s) in these "primordial" events will be the target(or source) of the click event. If mouse-down/up events have different targets (DOM element) then their common parent is used.
  5. Sequence of mouse down, move and up events may produce different logical events: click, swipe/scroll, etc.

I believe this is a full list of basic concepts.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文