DOM事件优先级

Question

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

以下是按字母顺序排列的事件......

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 - 用户退出页面

他们从事件队列中处理了什么顺序？

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

Answer 1

据我所知,这不是过去明确定义的.不同的浏览器可以自由地实现事件排序,但他们认为合适.虽然大多数都足够接近所有实际目的,但是已经并且仍然存在一些奇怪的边缘情况,其中浏览器有所不同(当然,在某些浏览器根本无法发送某些事件的情况下).

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

要协调事件,用户交互,脚本,呈现,网络等,用户代理必须使用本节中所述的事件循环.

每个用户代理必须至少有一个事件循环,并且每单位相关的类似源浏览上下文最多只有一个事件循环.

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

[...]用户代理可以有一个用于鼠标和键事件的任务队列(用户交互任务源),另一个用于其他任务.然后,用户代理可以在四分之三的时间内为其他任务提供键盘和鼠标事件首选项,保持界面响应但不会使其他任务队列处于饥饿状态,并且从不处理来自任何一个任务源的事件.[...]

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

Answer 2

对于想要了解调用序列相对事件的人,请参见下文.到目前为止,我只在Chrome中测试过.

1. 鼠标移到
2. 鼠标移动
3. 鼠标移开

1. 鼠标按下
2. 变化(关注输入)
3. 模糊(关注元素)
4. 焦点
5. 鼠标松开
6. 点击
7. DBLCLICK

1. KEYDOWN
2. 按键
3. KEYUP

Answer 3

如果您正在研究鼠标/触摸事件，Patrick H. Lauke 发表了有关该主题的演讲。\xe2\x80\x93 绝对是一本有趣的读物，它涉及不同浏览器、不同设备和不同标准的所有怪癖。

\n\n

他还捆绑了一套全面的测试。

\n

Answer 4

以下是一些事件的演示：

<input  onclick="console.log('onclick - Mouse clicks an object')" 
     ondblclick="console.log('ondblclick - Mouse double-clicks an object')"
    onmousedown="console.log('onmousedown - A mouse button is pressed')"
      onmouseup="console.log('onmouseup - A mouse button is released')"
    onmousemove="console.log('onmousemove - The mouse is moved')"
   onmouseenter="console.log('onmousenter - The mouse is moved over an element (not bubbling)')"
    onmouseover="console.log('onmouseover - The mouse is moved over an element')"
     onmouseout="console.log('onmouseout - The mouse is moved off an element')"
   onmouseleave="console.log('onmouseout - The mouse is moved off an element (not bubbling)')"
       onchange="console.log('onchange - The user changes the content of a field')"
      onfocusin="console.log('onfocusin - An element gets focus')"
        onfocus="console.log('onfocus - An element gets focus (not bubbling)')"
      onkeydown="console.log('onkeydown - A keyboard key is pressed')"
     onkeypress="console.log('onkeypress - A keyboard key is pressed or held down')"
onselectionchange="console.log('onselectionchange - The caret position changed')"
        onkeyup="console.log('onkeyup - A keyboard key is released')"
       onselect="console.log('onselect - Text is selected')"
     onfocusout="console.log('onfocusout - Loosing focus')"
         onblur="console.log('onblur - Loosing focus (not bubbling)')"
   ontouchstart="console.log('ontouchstart')"
    ontouchmove="console.log('ontouchmove')"
     ontouchend="console.log('ontouchend')"
  ontouchcancel="console.log('ontouchcancel')"
    placeholder="edit me"
/>

我注意到在 chrome/firefox 桌面上onselectionchange之前会触发onkey，而在 android chrome 上则相反。

https://jsfiddle.net/yv8zg5d1