W3C UIEvents阅读笔记(一)

Fri 07 June 2019 / In categories Standard, Spec

DOM, UIEvents, W3C, Web

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

UI Events,后称UI事件体系,定义了一套用于用户交互的UI事件,以及该系列事件如何与DOM树交互。同时,UI事件体系还定义了了触发它们的图形控件们,以便不同的浏览器都实现一套具有相同事件属性的控件。

3. DOM事件架构

3. DOM Event Architecture

3.1章节描述了事件的派发机制,有一个非常直观的图。应用可以通过dispatchEvent派发一个事件。根据图形系统的工作机制,交互事件(鼠标、键盘)一般是先由窗口捕获,然后再通过宿主语言(HTML、XML、SVG等等)的DOM结构向后继节点派发,知道到达目标节点只会再反弹。这个传播的过程一共有三个阶段:前往目标节点途中(capture phase)、到达目标节点(target phase)、从目标节点返回(bubble phase)。事件对象带有propagation path属性,会记录其传播路径(从顶层节点到目标节点)。事件的传播是可控制的。事件可以被途中的某个节点截获,从而停止传播;也可以一开始就设置禁止事件的返回阶段。

事件可以有副作用。比如一个点击事件到达一个表单按键之后,默认会提交这个表单。默认的副作用可以被preventDefault()避免,避免之后defaultPrevented会返回true。具有这种特性的事件称为一个可撤销事件,其cancelable属性返回true。如果事件是通过dispatchEvent派发的,那么被撤销的事件会导致此函数返回false。

有一些事件的受众是共享资源,比如那些修改DOM树的事件。这些事件就需要进行协调,而协调是采用一种同步的机制。这些事件会被排在一个队列中,依次发送作用,这些事件称为同步事件。另外一些事件产生的效果互不影响,这些事件可以同时进行,这些事件称为异步事件。

事件可以有不同的来源,对于用户代理(User Agent,也就是浏览器)自己产生的事件比外部产生的事可信度要高。这些事件的isTrusted会返回true。其他对于createEvent()initEvent()dispatchEvent()等方法产生的事件,其isTrusted返回false。可信事件对可以修改的资源范围大,权限高;而非可信事件则相反,通常没有默认动作,就像是preventDefault()被调用了的感觉。

一个反例是click事件,即便不可信,也会触发默认动作。

一些事件对象带有默认的事件激发行为( activation behavior )。比如当一个click事件作用于一个<a>元素,会激发其默认效果,也就是打开一个链接。基于事件的激发器大概有几种控制模式,定时控制、条件控制以及状态控制。

对于键盘事件和鼠标事件,它们的类型KeyboardEvent和MouseEvent在构造的时候可以接收额外的参数EventModifierInit,主要用来表示在击键的时候,是否按下了修饰按键(比如CTRL、ALT、SHIFT等等)。随后可以通过getModifierState()来获取修饰按键的状态。

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

事件类型

4. Event Types

DOM支持多种事件组(Event Module)。UIEvents定义了下层设备相关的事件组,以及用于修改DOM文档的事件组。

用户界面事件组(UI Event Types)

用户界面事件的类型定义如下:

[Constructor(DOMString type, optional UIEventInit eventInitDict), Exposed=Window]
interface UIEvent : Event {
  readonly attribute Window? view;
  readonly attribute long detail;
};

事件罗列(值得反复参考):

  • load(资源加载成功时派发)
  • unload(资源卸载时派发)
  • abort(资源加载失败)
  • error(无法解析加载的资源)
  • select(当用户选中一些文字)

有趣的是load是异步事件,而unload以及abort是同步事件。

输入焦点事件组(Focus Events)

事件定义如下:

[Constructor(DOMString type, optional FocusEventInit eventInitDict), Exposed=Window]
interface FocusEvent : UIEvent {
  readonly attribute EventTarget? relatedTarget;
};

焦点事件有时候会涉及到两个事件对象。比如焦点从一个输入框跳到另一个输入框的时候,这两个输入框都是相关的事件对象。relatedTarget参数用来添加第二事件对象。

焦点是操作系统提供的服务,用于指示当前接收键盘事件的对象。本规范中只定义的焦点事件范围仅限于浏览器的DOM的document之内。document可以有一至多个focus ring,用来把多个能接收焦点的子元素组织在一起。可以用TAB来在一个focus ring中切换焦点。不是所有的HTML元素都能够接收焦点。对于某个能够接收焦点的HTML元素,也不是所有状态下都能够接收焦点。

焦点事件类型:

  • blur
  • focus
  • focusin
  • focusout

这几个事件都是同步的

下面是无焦点 =》焦点已到目标一 =》 焦点移到目标二过程中产生的事件:

  1. focusin (目标一快要接收焦点)
  2. focus (目标一接收焦点)
  3. focusout(目标一快要丢失焦点)
  4. focusin(目标二快要接收焦点)
  5. blur(目标一丢失焦点)
  6. focus(目标二接收焦点)

(本篇完)

Load Disqus Comments