Event 事件调度和DOM事件流

  • UIEventTypes = [load, unload, abort, error, select]
  • FocusEventTypes = [blur, focus, focusin, focusout]
  • MouseEventTypes = [click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup]
  • WheelEventTypes = [wheel]

Menu

3.1 事件调度和DOM事件流
3.2 默认动作和可取消事件
3.3 同步和异步事件
3.4 Trusted events
3.5 Activation triggers and behavior(激活 触发器 和 行为)
3.6 构建鼠标和键盘事件
4 Event Types
4.1 User Interface Events
4.1.1 nterface UIEvent
4.1.2 UI Event Types
4.2 Focus Events
4.2.2 焦点事件顺序
4.2.4. Focus Event Types
4.3 Mouse Event
4.3.4 Mouse Event Types
4.4. Wheel Events
4.4.2. Wheel Event Types
4.5. Input Events
4.5.3. Input Event Types
4.6. Keyboard Events

3.1 事件调度和DOM事件流
  • 应用程序可以使用dispatchEvent()方法分派事件对象,事件对象将通过DOM事件流确定的DOM树传播。
  • 事件对象被分派到事件目标。但是在开始调度之前,必须先确定事件对象的传播路径。
  • 传播路径是事件通过的当前事件目标的有序列表。这个传播路径反映了文档的层次树结构。列表中的最后一项是事件目标,列表中目标项父项的所有前项称为祖先项,目标项的前一项是父项。
  • 一旦确定了传播路径,事件对象就会通过一个或多个事件阶段。事件有三个阶段:捕获阶段、目标阶段和气泡阶段。事件对象完成以下描述的这些阶段。如果不支持某个阶段,或者事件对象的传播已经停止,则跳过该阶段。例如,如果将bubbles属性设置为false,则会跳过bubble阶段,如果在dispatchEvent() 之前调用了stopPropagation(),则会跳过所有阶段。
    • 捕获阶段:事件对象通过目标的祖先从窗口传播到目标的父对象。这个阶段也称为捕获阶段。
    • 目标阶段:事件对象到达事件对象的事件目标。这个阶段也称为目标阶段。如果事件类型指示事件不冒泡,则事件对象将在此阶段结束后停止。
    • 冒泡阶段:事件对象以相反的顺序通过目标的祖先进行传播,从目标的父对象开始,以窗口结束。这个阶段也称为起泡阶段。

3.2 默认动作和可取消事件
  • 可取消事件对象可以与一个或多个“默认动作”相关联。要取消事件,请调用preventDefault()方法。
  • 事件对象是否可取消由cancelable属性表示。
  • 调用preventDefault()将停止事件对象的所有相关默认操作。
  • defaultprevention属性指示事件是否已经被取消。
  • 如果DOM应用程序本身启动了调度,那么dispatchEvent()方法的返回值指示事件对象是否被取消。
  • Many implementations additionally interpret an event listener’s return value, such as the value false, to mean that the default action of cancelable events will be cancelled (though window.onerror handlers are cancelled by returning true).

3.3 同步和异步事件
  • 事件可以同步或异步发送。
    • 同步事件(“同步事件”)的处理就好像它们在一个“先到先出”模型中的虚拟队列中一样,按照时间顺序排列,顺序与其他事件、DOM中的更改以及用户交互有关。这个虚拟队列中的每个事件都被延迟,直到前一个事件完成其传播行为,或者被取消。一些同步事件是由特定的设备或进程驱动的,比如鼠标按钮事件。这些事件由为这组事件定义的事件顺序算法控制,用户代理将按照定义的顺序分派这些事件。
    • 异步事件(“async事件”)可以在操作结果完成时被分派,与其他事件、DOM中的其他更改或用户交互无关。
  • 在加载文档期间,将解析并执行内联脚本元素。加载事件排队等待在脚本元素上异步触发。但是,因为它是一个异步事件,所以它在文档加载期间触发的其他同步事件(例如来自[HTML5]的DOMContentLoaded事件)之间的顺序并没有得到保证。

3.4 Trusted events
  • 事件生成的用户代理,作为用户交互的结果,或直接导致修改DOM,可信的用户代理与特权,不提供事件生成的脚本通过createEvent()方法,使用initEvent修改()方法,或通过dispatchEvent派遣()方法。可信事件的isTrusted属性值为true,而不可信事件的isTrusted属性值为false。
  • 除了click事件外,大多数不受信任的事件不会触发默认操作。这个事件总是触发默认动作,即使isTrusted属性为false(此行为为向后兼容保留)。所有其他不受信任的事件的行为就好像对该事件调用了preventDefault()方法一样。

3.5 Activation triggers and behavior(激活 触发器 和 行为)
  • 某些事件目标(如链接或按钮元素)可能具有关联的激活行为(如链接后面的链接),这些实现在响应激活触发器(如单击链接)时执行。

EXAMPLE:HTML和SVG都有一个表示链接的<a>元素。<a>元素的相关激活触发器是对<a>元素的文本或图像内容的单击事件,或当<a>元素具有焦点时具有键属性值“Enter”键的keydown事件。<a>元素的激活行为通常是,在外部链接的情况下,将窗口的内容更改为新文档的内容,或者在内部链接的情况下,更改当前文档相对于新锚的位置。

  • 激活触发器是一个用户动作或事件,它向实现表明应该启动激活行为。用户发起的激活触发器包括单击可激活元素上的鼠标按钮,在可激活元素具有焦点时按下Enter键,或者在该元素没有焦点时按下与可激活元素(“热键”或“访问键”)以某种方式链接的键。基于事件的激活触发器可能包括基于时间的事件,这些事件在某个时钟时间或某个时间段过去之后激活某个元素,在某个动作完成后激活进度事件,或许多其他基于条件或基于状态的事件。

3.6 构建鼠标和键盘事件
  • (unknown)通常,当调用事件接口或从事件接口继承的接口的构造函数时,应该遵循[DOM]中描述的步骤。然而,KeyboardEvent和MouseEvent接口为初始化事件对象的键修饰符的内部状态提供了额外的dictionary成员:具体来说,是为使用getModifierState()和getModifierState()方法而查询的内部状态。本部分补充了用这些可选修饰符状态初始化新事件对象的DOM4步骤。

4 Event Types

4.1 User Interface Events

  • 用户界面事件模块包含与用户界面和文档操作相关联的基本事件类型。

4.1.2 UI Event Types
  • UIEvent接口提供了与用户界面事件相关的特定上下文信息。
  • 要创建UIEvent接口的实例,使用UIEvent构造函数,传递一个可选的UIEventInit字典。
  • UIEventTypes = [load, unload, abort, error, select]

4.2 Focus Events
  • FocusEvent接口提供了与焦点事件关联的特定上下文信息。
  • 要创建FocusEvent接口的实例,请使用FocusEvent构造函数,传递一个可选的FocusEventInit字典。
4.2.2 焦点事件顺序
  • 本规范中定义的焦点事件以相对于其他事件的设置顺序出现。以下是在元素之间转移焦点时发生的典型事件序列(此顺序假设最初没有元素聚焦):


    焦点事件顺序
4.2.4. Focus Event Types
  • FocusEventTypes = [blur, focus, focusin, focusout]

4.3 Mouse Event
4.3.4 Mouse Event Types
  • MouseEventTypes = [click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup]

4.4. Wheel Events
  • Wheels是可以在一个或多个空间维度上旋转的设备,它可以与指针设备相关联。坐标系依赖于环境配置。

用户环境可以配置为将垂直滚动与沿y轴旋转相关联,将水平滚动与沿x轴旋转相关联,将缩放与沿z轴旋转相关联。

  • WheelEvent对象的deltaX、deltaY和deltaZ属性表示它们各自轴上的度量,单位为像素、直线或页面。报告的测量是在特定于环境的算法将wheel device的实际旋转/移动转换为适当的值和单位之后提供的。

A user’s environment settings can be customized to interpret actual rotation/movement of a wheel device in different ways. One movement of a common "dented" mouse wheel can produce a measurement of 162 pixels (162 is just an example value, actual values can depend on the current screen dimensions of the user-agent). But a user can change their default environment settings to speed-up their mouse wheel, increasing this number. Furthermore, some mouse wheel software can support acceleration (the faster the wheel is rotated/moved, the greater the delta of each measurement) or even sub-pixel rotation measurements. Because of this, authors can not assume a given rotation amount in one user agent will produce the same delta value in all user agents.

4.4.2. Wheel Event Types
  • WheelEventTypes = [wheel]

4.5. Input Events
  • 每当DOM被更新时,输入事件都会作为通知发送。
4.5.3. Input Event Types
  • 4.5.3.1. beforeinput
  • 4.5.3.2. input

4.6. Keyboard Events
4.6.1. Interface KeyboardEvent
  • KeyboardEvent接口提供了与键盘设备相关的特定上下文信息。每个键盘事件使用一个值引用一个键。键盘事件通常指向具有焦点的元素。
  • KeyboardEvent . key : 保存着keypress得到的值。
  • KeyboardEvent . code : 代码持有一个字符串,该字符串标识按下的物理键。该值不受当前键盘布局或修饰符状态的影响,因此特定键将始终返回相同的值。
  • KeyboardEvent . location : location属性包含设备上键的逻辑位置的指示。
4.6.4. Keyboard Event Types
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,233评论 6 495
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,357评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,831评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,313评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,417评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,470评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,482评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,265评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,708评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,997评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,176评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,503评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,150评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,391评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,034评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,063评论 2 352

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,483评论 1 11
  • 第13章 事件 1. 事件流 事件流描述的是从页面中接收事件的顺序。 (1) 事件冒泡 IE 的事件流叫做事件冒泡...
    yinxmm阅读 947评论 0 17
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,771评论 0 1
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 676评论 0 4
  • 有时候觉得,我们真是越长越大了,可以一大早起床去医务室给自己买感冒药。 有时候又觉得,我们越长越小了,连小小的感冒...
    forefront阅读 162评论 0 0