DOM 事件优先级

2022-01-15 00:00:00 event-handling javascript dom-events eventqueue

在 JavaScript 中处理事件的优先顺序是什么?

What order of precedence are events handled in JavaScript?

这里是按字母顺序排列的事件...

Here are the events in alphabetical order...

  1. onabort - 加载图像中断
  2. onblur - 元素失去焦点
  3. onchange - 用户更改字段内容
  4. onclick - 鼠标点击一个对象
  5. ondblclick - 鼠标双击一个对象
  6. onerror - 发生错误时加载文档或图像
  7. onfocus - 元素获得焦点
  8. onkeydown - 键盘键是按下
  9. onkeypress - 键盘键是按下或按住
  10. onkeyup - 键盘键是发布
  11. onload - 页面或图像是加载完毕
  12. onmousedown - 鼠标按钮是按下
  13. onmousemove - 鼠标移动
  14. onmouseout - 鼠标移开一个元素
  15. onmouseover - 鼠标移动在一个元素上
  16. onmouseup - 鼠标按钮发布
  17. onreset - 重置按钮是已点击
  18. onresize - 一个窗口或框架是调整大小
  19. onselect - 文本被选中
  20. onsubmit - 提交按钮是已点击
  21. onunload - 用户退出页面

它们在事件队列中的处理顺序是什么?

What order are they handled out of the event queue?

我相信优先级不是先进先出 (FIFO).

The precedence is not first-in-first-out (FIFO) or so I believe.

推荐答案

据我所知，过去没有明确定义.不同的浏览器可以自由地实现它们认为合适的事件排序.虽然大多数情况对于所有实际目的来说都足够接近，但已经存在并且继续存在一些奇怪的边缘情况，浏览器会有所不同(当然，更多的情况是某些浏览器根本无法发送某些事件em>).

This was not, so far as i know, explicitly defined in the past. Different browsers are free to implement event ordering however they see fit. While most are close enough for all practical purposes, there have been and continue to be some odd edge cases where browsers differ somewhat (and, of course, the many more cases where certain browsers fail to send certain events at all).

也就是说，HTML 5 草案建议 确实尝试指定事件将如何排队和分派 - 事件循环:

That said, the HTML 5 draft recommendation does make an attempt to specify how events will be queued and dispatched - the event loop:

为了协调事件，用户交互、脚本、渲染、网络等，用户代理必须使用事件循环，如本节.

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section.

必须至少有一个事件循环每个用户代理，最多一个事件每个相关单元的循环相似来源的浏览上下文.

There must be at least one event loop per user agent, and at most one event loop per unit of related similar-origin browsing contexts.

一个事件循环有一个或多个任务排队.任务队列是有序的任务清单 [...]当用户代理要对任务进行排队时，它必须将给定的任务添加到其中之一相关事件的任务队列环形.一个人的所有任务特定的任务源必须始终是添加到同一个任务队列，但是来自不同任务源的任务可能被放置在不同的任务队列中.[...]

An event loop has one or more task queues. A task queue is an ordered list of tasks [...] When a user agent is to queue a task, it must add the given task to one of the task queues of the relevant event loop. All the tasks from one particular task source must always be added to the same task queue, but tasks from different task sources may be placed in different task queues. [...]

[...]一个用户代理可以有一个任务队列对于鼠标和按键事件(用户交互任务源)，以及另一个对于其他一切.用户代理然后可以给键盘和鼠标事件优先于其他任务四分之三的时间，保持界面响应但不响应饿死其他任务队列，并且永远不会处理来自任何一项任务的事件源乱序.[...]

[...]a user agent could have one task queue for mouse and key events (the user interaction task source), and another for everything else. The user agent could then give keyboard and mouse events preference over other tasks three quarters of the time, keeping the interface responsive but not starving other task queues, and never processing events from any one task source out of order. [...]

注意最后一点:由浏览器实现决定哪些事件将被组合在一起并按顺序处理，以及赋予任何特定类型事件的优先级.因此，没有理由期望所有浏览器现在或将来都以固定顺序调度 所有 事件.

Note that last bit: it is up to the browser implementation to determine which events will be grouped together and processed in order, as well as the priority given to any particular type of event. Therefore, there's little reason to expect all browsers to dispatch all events in a fixed order, now or in the future.

相关文章