美文网首页
Event 事件调度和DOM事件流

Event 事件调度和DOM事件流

作者: ft207741 | 来源:发表于2018-11-07 11:43 被阅读0次
    • 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

    相关文章

      网友评论

          本文标题:Event 事件调度和DOM事件流

          本文链接:https://www.haomeiwen.com/subject/paymxqtx.html