此文是W3C UI Events标准的阅读笔记。UI Events是一些列预定好的[DOM]事件，主要用来跟用户交互。

事件类型

4. Event Types

鼠标事件组（Mouse Events）

鼠标事件的类型定义比较复杂，因为鼠标事件可以和键盘事件结合：

[Constructor(DOMString type, optional MouseEventInit eventInitDict), Exposed=Window]
interface MouseEvent : UIEvent {
  readonly attribute long screenX;
  readonly attribute long screenY;
  readonly attribute long clientX;
  readonly attribute long clientY;

  readonly attribute boolean ctrlKey;
  readonly attribute boolean shiftKey;
  readonly attribute boolean altKey;
  readonly attribute boolean metaKey;

  readonly attribute short button;
  readonly attribute unsigned short buttons;

  readonly attribute EventTarget? relatedTarget;

  boolean getModifierState(DOMString keyArg);
};

其中button属性用来指示事件由哪个鼠标按键被按下或者释放，本规范描述了5个按键（右手鼠标为例）

  • 0，左键
  • 1，中建
  • 2，右键
  • 3，回退键
  • 4，前进键

其中3和4个别鼠标才有，可以用来控制当前网页的浏览记录的前进和后退。

另外的buttons属性用来表明事件发生的时候哪个鼠标按键正在被按下：

  • 0，没有
  • 1，左键
  • 2，右键
  • 4，中键

鼠标事件类型：

  • auxclick（右键点击）
  • click（左键点击）
  • dblclick（左键双击）
  • mousedown（鼠标按键按下）
  • mouseup（鼠标按键释放）
  • mouseenter（鼠标进入范围）
  • mouseleave（鼠标离开范围）
  • mousemove（鼠标位置改变）
  • mouseout（和mouseleave类似，但是会回溯）
  • mouseover（和mouseenter类似，但是会回溯）

当鼠标移过一个目标A的时候，会有下列事件：

  1. mousemove
  2. mouseover（A）
  3. mouseenter（A）
  4. mousemove……（A）
  5. mouseout（A）
  6. mouseleave（A）

如果目标B嵌套在目标A中，鼠标移入目标A，再移入目标B，接着返回目标A，会有下列事件：

  1. mousemove
  2. mouseover (A)
  3. mouseenter (A)
  4. mousemove……（A）
  5. mouseout（A）
  6. mouseover（B）
  7. mouseenter（B）
  8. mousemove……（B）
  9. mouseout（B）
  10. mouseleave（B）
  11. mouseover（A）
  12. mousemove……（A）
  13. mouseout（A）
  14. mouseleave（A）

可以看到，移入自己的嵌套元素的时候不会有mouseenter和mouseleave事件

如果A，B，C三个元素在绘制的时候完全重合在一起，并且A是B的父节点，B是C的父节点。A在重叠的最下层，B在中层，C在上层。浏览器显示的是C的内容，当鼠标移入C的时候，事件序列如下：

  1. mousemove
  2. mouseover（C）
  3. mouseenter（A）
  4. mouseenter（B）
  5. mouseenter（C）
  6. mousemove……（C）
  7. mouseout（C）
  8. mouseleave（C）
  9. mouseleave（B）
  10. mouseleave（A）

下面事件系列是当一个HTML按键被双击的时候所触发的：

  1. mousedown
  2. mousemove (非必须，如果光标滑动的话)
  3. mouseup
  4. click
  5. mousemove（非必须，如果光标滑动的话）
  6. mousedown
  7. mousemove（非必须，如果光标滑动的话）
  8. mouseup
  9. click
  10. dblclick

上面的mousemove事件是非必须的，但是本规范里面并没有规定什么时候应该触发，以及触发多少次，由具体实现自行定义。由于mousemove的存在，会导致mousedown和mouseup在不同的目标上触发，这时候click和dblclick会在目标的最近公共父节点上触发。如果在中间的某个事件中，目标节点被从DOM中移除了，那么剩下的事件就不需要触发了。比如，一个目标节点在mousedown的时候被移除了，后续的mouseup、click以及dblclick就不需要触发了。

滚轮事件（Wheel Events）

滚轮事件的定义：

[Constructor(DOMString type, optional WheelEventInit eventInitDict), Exposed=Window]
interface WheelEvent : MouseEvent {
  // DeltaModeCode
  const unsigned long DOM_DELTA_PIXEL = 0x00;
  const unsigned long DOM_DELTA_LINE  = 0x01;
  const unsigned long DOM_DELTA_PAGE  = 0x02;

  readonly attribute double deltaX;
  readonly attribute double deltaY;
  readonly attribute double deltaZ;
  readonly attribute unsigned long deltaMode;
};

滚轮事件只有一个类型：wheel。

（本篇完）