zoukankan      html  css  js  c++  java

  • javascript事件

    原文链接：http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-overview

    DOM2事件模型概览

    DOM2事件模型旨在两个方面的设计。

    • 第一，设计可加入事件处理的原始事件系统，通过树结构来描述事件流，给每个事件提供基本的上下文信息。另外，规范为用户交互控制和文档变化通知提供标准事件模型，包含针对这些事件模型的已定义的上下文信息。
    • 第二，事件模型的另一个目的是提供一部分已在DOM0级浏览器下使用的事件系统。这是为了促进已存在的脚本和内容的交互能力。这可能并一定向后兼容，但规范要尽量做到这一点。
      下面的事件模型规范定义了DOM事件模型的规范和一些用于模型中相应的时间模型。事件模型由两种事件冒泡、事件监听和事件交互组成。
      一个DOM应用会以Events和2.0为参数使用DOMImplementation接口的hasFeature(feature,version)方法，来查看事件模型是否被该实现所支持。为了完全支持这个模型，实现者必须还要支持DOM2 Core规范的DOM Level 2 CoreCore功能。你还可以参照DOM2 Core规范中的conformance来获取更多信息。
      每个事件模型在其事件模型列表中描述了他自身的功能。

      术语

    • UI事件（UI events）
      即用户交互事件。这些事件通过用户使用外部设备（鼠标，键盘等）触发。
    • UI逻辑事件（UI Logical events）
      设备无关的用户交互事件，如焦点改变消息或元素触发通知。
    • 突变事件（Mutation events）
      任意改变文档结构的行为触发的事件。
    • 捕获（Capturing）
      一个事件在被事件目标处理之前，先被事件目标的某个祖先处理。
    • 冒泡（Bubbling）
      一个事件在被事件目标处理之后，再被事件目标的某个祖先处理。
    • 可取消（Cancelable）
      用来在处理事件时，用户可以选择阻止DOM实现框架执行事件任何默认行为。

    事件流描述

    事件流是一个过程，一个事件起源于DOM实现，通过它来传递到文档对象模型。事件捕获和事件冒泡方法，配合多种事件注册技术，使得事件可通过各种方法处理。可以在事件目标层面上处理，也可以在文档树种的事件目标的上级处理。

    基本事件流

    每个事件都有一个事件目标，DOM实现者通过该事件目标来控制该事件。这个事件目标被定义在事件的‘target’属性上。当事件到达该目标，任何注册在该事件目标上的监听方法将被触发。虽然该事件目标上的所有事件监听一定会被这个事件目标接收的任何事件触发，但是没有哪个规范指出它们相对事件目标上的其他监听者接收事件的顺序。如果一个事件没有使用事件捕获或事件冒泡，那么该事件流一定是最后一个被触发。如果使用了事件冒泡或事件捕获，那么事件流将按如下描述进行。
    任何事件监听者内部抛出的异常都是阻止该事件继续冒泡。其他的事件监听者则按描述的方式继续进行。
    事件监听者的行为可能引发其他的事件。另外的事件应该以异步方法被处理，而且可能引起事件模型的重入。

    事件捕获

    通过事件捕获，在事件被事件目标接收到之前，一个注册在事件目标祖先上的事件监听会影响这个事件。从树的顶端（通常是Document节点）的捕获，造成对称的反向冒泡。从文档树顶端到事件目标处的事件目标链在事件最初被绑定的时候已经决定了。如果在事件处理过程中发生了改变，事件流将基于最初的树状态进行。
    一个绑定在时间目标上的事件监听可以选择通过将addEventListener方法的useCaptrue参数设置为true来使用事件捕获。因此，当一个给定类型的事件被绑定在该捕获对象的后代元素上时，该事件将触发文档树顶端到事件目标上所有的捕获事件监听。这个向下的冒泡将一直继续，直到事件到达事件目标。一个基于某个事件目标注册的捕获事件监听，不会被直接绑定在该事件目标上的事件所触发。
    如果一个捕获事件监听想要阻止后来的事件发生，那么它需要调用事件接口的stopPropagation方法。它将阻止之后的时间调度，就算注册在相同层级上的另外的事件监听仍然会接收到该事件。一旦事件的stopPropagation方法被调用，之后对该方法的再次调用将不会有任何影响。如果不存在另外的捕获且stopPropagation没有被调用，那么事件会触发目标上的相应的监听器。
    虽然事件捕获和事件委托类似，但还是有两点区别：

    • 第一，事件捕获只允许来自捕获事件目标的后代元素的影响。而不允许来自于捕获者祖先、兄弟元素或兄弟元素的后代元素的事件的影响。
    • 第二，事件捕获并不是定义为单一事件目标，它用于特定类型的事件。一旦指定，对于所有de捕获者的后代元素，事件捕获会影响特定类型的所有事件。

    事件冒泡

    定义为冒泡的事件会循环处理一个相同的事件流，就像该事件流是非冒泡的一样。事件被绑定在它的事件目标上，且这里的所有事件监听被触发。冒泡事件会接着触发事件紧跟在目标父元素上方的链上另外的事件，检测其他注册在事件目标上的事件监听。这个向上的冒泡会一直持续到文档树的Document节点（包含Document节点）。捕获类的注册事件在该阶段不会被触发。从事件目标到文档树顶端的事件目标链在事件绑定初始化时已经被确定了。如果在事件处理过程中发生了任何改变，事件流将基于最初的树状态进行。

    事件取消

    一些事件被设计成是可取消的。对于这些事件，DOM实现着通常有默认行为。例如浏览器对于超链接。如果用户点击了链接，默认通常会激活这个链接。在处理这些事件之前，实现者会检测注册的事件监听来接收该事件并将事件传递给这些监听者。这些监听者之后会选择取消实现者的默认星外或允许这个默认行为。但是取消浏览器中的超链接的默认行为将不会激活该超链接。
    通过事件的preventDefault方法来进行默认行为取消。当一个或多个事件监听在事件流执行过程中调用了preventDefault方法，那么默认行为将会被取消。
    不同的实现者会定义自己的默认行为。DOM不会尝试定义这些行为。

    事件监听注册

    事件注册接口

    事件目标接口（定义在DOM2中）
    EventTarget接口由实现者中支持DOM事件模型的Nodes来实现。因此，该接口通过在Node接口实例上使用特定绑定的方法来实现。该接口允许事件目标上的事件监听的注册和删除以及事件目标上的事件调度。

    接口定义
    1. // Introduced in DOM Level 2:
    2. interface EventTarget {
    3. void               addEventListener(in DOMString type,
    4. in EventListener listener,
    5. in boolean useCapture);
    6. void               removeEventListener(in DOMString type,
    7. in EventListener listener,
    8. in boolean useCapture);
    9. boolean            dispatchEvent(in Event evt)
    10. raises(EventException);
    11. };
    方法
    • addEventListener
      这个方法用来在事件目标上注册事件监听函数。当一个事件监听在处理事件时被添加到事件目标上，那么他将不会被当前行为触发，而可能会在接下来的事件流步骤中被触发，比如冒泡过程。如果多个相同的事件监听器被注册在同样一个事件目标上，并使用相同的参数，那么会丢弃重复的监听器。它们不会使事件监听被调用多次，因为它们是被丢弃掉的，而不需要使用removeEventListener方法删除。
      参数
      • type（字符串类型）
        用户注册的事件类型
      • listener （事件监听器类型）
        该事件监听器承载了一个用户实现的接口，它包含了事件发生时要调用的方法。
      • useCapture（布尔类型）
        如果为true，那么表明用户希望创建捕获。一旦创建了捕获，特定类型的事件将在被指派给树结构下方的所有事件目标之前被指派给注册的事件监听器。通过树向上冒泡的事件将不会触发一个指定使用捕获的事件。
      • 无返回值
      • 不会抛出异常
    • dispatchEvent
      该方法用来将事件调度到实现者的事件模型中。以该方式调度的事件和实现者直接调度的事件有一样的捕获和冒泡。事件的目标就是dispatchEvent方法的作用的事件目标。
      参数
      • evt（事件类型）
        指定用于处理事件的事件类型、表现、上下文信息。
      • 返回值
        返回布尔类型的值，dispatchEvent的返回值用来表示处理事件的监听函数是否调用了preventDefault。如果调用了preventDefault，那么返回true，否则返回false。
      • 异常
        UNSPECIFIED_EVENT_TYPE_ERROR: 在调用dispatchEvent前，当事件的类型没有在事件创建时被定义，会发生该异常。当指定事件类型为null或空时也会产生该异常。
    • removeEventListener
      该方法用来从事件目标上移除事件监听器。在事件目标处理事件时，如果时间监听器从事件目标上移除，它将不再被当前的行为触发。事件监听器在被移除后将不再被调用。
      参数
      • type （字符串类型）
        指定要移除的事件的类型
      • listener （事件监听器类型）
        该参数指定了要移除的事件监听器
      • useCapture （布尔值）
        指定要移除的事件监听器是否被注册为一个捕获监听。如果监听器被注册了两次，一次为捕获一次为非捕获，那么这两个将被分别移除。捕获监听器的移除并不会影响该监听器的非捕获版本，反之亦然。
      • 无返回值
      • 无抛出异常
    • 事件监听接口（定义在DOM2）
      事件监听接口是处理事件的基本方法。用户实现事件监听接口且在事件目标上使用AddEventListener注册他们的事件监听器。完成监听后，用户也可以从事件目标上移除他们的事件监听器。
      当使用cloneNode方法克隆一个节点时，原节点上的事件监听器并不会被复制到节点副本上。如果用户希望在克隆节点上使用这些监听器，需手动添加。
      接口实现：
      1. // Introduced in DOM Level 2:
      2. interface EventListener {
      3. void               handleEvent(in Event evt);
      4. };
      方法
    • handleEvent
      当一个事件目标接口注册的类型事件发生时，调用该方法。
      参数
      • evt （事件类型）
        该事件对象包含了事件的上下文信息。它也包含了stopPropagation方法和preventDefault方法，这两个方法用来确定事件流和默认行为。
      • 无返回值
      • 无抛出异常

        HTML4.0中的事件监听接口

        在HTML4.0中，事件监听被描述为元素的属性。同样类型的事件绑定，后一个将会覆盖前一个。DOM事件模型允许在一个事件目标上注册多个监听器。为了达到这个目的，事件监听器将不再作为属性存在。
        为了和HTML4.0兼容，实现者要考虑这个表示事件处理的属性。useCapture参数默认为false。该事件监听器和其他注册在事件目标上的事件监听器一样。如果表示事件监听器的属性改变，这回被当作是对原先注册的监听器的移除后又重新创建的一个新的监听器。没有任何技术支持来允许HTML4.0的事件监听器来获取为每个事件定义的上下文信息。

        事件接口

        接口事件（定义在DOM2中）
        Event接口用来在处理事件时提供事件的上下文信息。一个实现了Event接口的对象通常作为事件处理函数的第一个参数传入。还有更多的特定上下文信息通过从Event对象派生额外接口获得，包含和该类型事件直接相关的一些信息。这些信息都可以被处理函数获取。这些派生信息也可以用来实现一个传入到事件处理器中的对象。
        接口定义：
        1. // Introduced in DOM Level 2:
        2. interface Event {
        3. // PhaseType
        4. const unsigned short CAPTURING_PHASE = 1;
        5. const unsigned short AT_TARGET = 2;
        6. const unsigned short BUBBLING_PHASE = 3;
        7. readonly attribute DOMString type;
        8. readonly attribute EventTarget target;
        9. readonly attribute EventTarget currentTarget;
        10. readonly attribute unsigned short eventPhase;
        11. readonly attribute boolean bubbles;
        12. readonly attribute boolean cancelable;
        13. readonly attribute DOMTimeStamp timeStamp;
        14. void stopPropagation();
        15. void preventDefault();
        16. void initEvent(in DOMString eventTypeArg,
        17. in boolean canBubbleArg,
        18. in boolean cancelableArg);
        19. };
    • 短语组：
      一个用来表明事件流被处理到哪个阶段的整型。
    • 常量：
      • AT_TARGET
        处于事件评估阶段
      • BUBBLING_PHASE
        处于事件冒泡阶段
      • CAPTURING_PHASE
        处于事件捕获阶段
    • 属性
      • bubbles （布尔值），只读
        用来表示事件是否为冒泡事件。如果是冒泡事件则为true，否则为false。
      • cancelable（布尔值），只读
        用来表示事件是否可取消其默认事件。如果默认行为可以被取消，则为true，否则为false。
      • currentTarget（事件目标类型），只读
        用来表示正在处理事件监听的事件的事件目标。在捕获和冒泡阶段该值是很有用的。
      • eventPhase（无符号短整型），只读
        用来表示事件流的当前阶段
      • target（事件目标类型），只读
        用来表示事件起始于哪个事件目标
      • timeStamp（时间戳），只读
        用来表示事件创建时间。一些系统实际上可能不会提供这个信息，并不是所有的事件都有timeStamp值。如果该值不存在，那么对它的调用将返回0。该时间为UTC时间1970年1月1号 0:0:0到当前的毫秒数。
      • type（字符串类型），只读
        事件的名称（大小写敏感）。名字必须为一个XML name
    • 方法
      • initEvent
        该方法用来初始化一个通过DocumentEvent接口创建的事件。这个方法只能在事件通过dispatchEvent方法被调度之前使用，虽然它可以在这个阶段被调用多次。被多次调用时，以最后一次调用为主。如果从Event接口的子类中被调用，那么只有initEvent方法中定义的值会被改变，其他的属性不会被改变。
        该方法的参数：
        eventTypeArg（字符串）
        指定事件类型。这个事件可以是本规范中定义的某个事件或是一个新的事件类型。该字符串必须是一个XML name。新的事件类型不能以字符串‘DOM’开头（包含任意大写，小写或大小写混合）。因为这个是以后DOM事件的保留字。强烈建议如果第三方要实现自己的额外方法，需要加上他们自己的前缀来避免混乱或和其他新事件冲突。
        canBubbleArg（布尔值）
        表示事件是否可以冒泡
        cancelableArg（布尔值）
        表示事件的默认事件是否能被取消
        无返回值
        无抛出异常
      • preventDefault
        如果一个事件是可以被取消的，那么preventDefault方法用来指定该事件要被取消，也就是说实现者对其的默认行为不会发生。如果在事件流的任意阶段，调用preventDefault方法都使得事件被取消。事件上的任意默认行为都不会发生。对于不可取消默认行为的事件，该方法不起作用。一旦调用preventDefault方法，它将影响事件冒泡的剩余阶段。该方法可用在事件流的任一阶段。
        无参数
        无返回值
        无抛出异常
      • stopPropagation
        该方法用来在事件流中阻止之后的事件冒泡。如果事件监听器使用了该方法，那么事件将停止其在文档树上的冒泡。该事件将在事件流停止前调用当前事件目标上的所有监听器。该方法可用在事件流的任一阶段。
        无参数
        无返回值
        无抛出异常
        异常（定义在DOM2中的事件异常）
        事件操作可能会抛出如定义在方法描述中的异常
        接口定义
        1. // Introduced in DOM Level 2:
        2. exception EventException {
        3. unsigned short code;
        4. };
        5. // EventExceptionCode
        6. const unsigned short UNSPECIFIED_EVENT_TYPE_ERR = 0;
        事件异常码
        一个用来表示错误产生类型的整型
        恒量
        UNSPECIFIED_EVENT_TYPE_ERR
        在调用方法前，如果事件类型并未通过事件初始化定义 ，或事件类型为null或空时，都会抛出该异常。

        文档事件接口

        文档事件接口（定义在DOM2）
        文档事件接口提供一种机制，通过该机制，用户可以创建一个实现者支持的事件。这意味着文档事件接口可以在同一个对象上实现，该对象在一个支持事件模型的实现中实现了Document接口。
        接口定义：
        1. // Introduced in DOM Level 2:
        2. interface DocumentEvent {
        3. Event createEvent(in DOMString eventType)
        4. raises(DOMException);
        5. };
    • 方法
      • createEvent
        参数
        eventType（字符串类型）
        该参数指定了要创建的事件接口的类型。如果指定的事件接口是被实现者支持的，那么该方法返回一个指定接口类型的事件。如果事件是通过dispatchEvent方法调用的，那么相应的事件初始化方法需要在创建后调用，以便初始化该事件的一些值。例如，用户想同步一种UIEvent就要调用以UIEvent为参数调用createEvent。然后在新的UIEvent上调用initUIEvent方法来设置UIEvent的会被调用的特性类型和一些上下文信息。
        在用户不方便或不必要亲自创建一个事件时，使用createEvent方法创建一个事件。当实现者对事件的支持不足时，用户使用dispatchEvent方法来支持他们自己的事件实现。
        返回值
        新创建的事件
        异常
        NOT_SUPPORTED_ERR:当实现者不支持要求的事件接口类型时。

        事件模型定义

        DOM2事件模型允许一个DOM实现者支持多种事件模型。模型被定义为允许额外的新事件模型。DOM不会尝试定义所有的可能事件。为了达到交互目的，DOM会定义一个与设备弱相关的用户交互的模型，一个UI逻辑事件模型，或一个文档变化事件模型。第三方定义的任一新的事件类型都不能以'DOM'开头（不管任意大小写组合）。这个前缀是作为以后的DOM事件模型的保留字。强烈建议如果第三方要实现自己的额外方法，需要加上他们自己的前缀来避免混乱或和其他新事件冲突。

        用户交互事件模型

        用户交互事件模型由列在HTML4.0中的事件和另外在DOM0级浏览器中支持的事件组成。
        一个DOM应用以UIEvent和2.0为参调用DOMImplementation的hasFeature(feature,version)方法来检测一个用户交互事件是否被实现者支持。为了全面支持这个模型，一个实现者必须同时支持本规范中定义的Events功能和在DOM2中定义的Views功能。你还可以参照DOM2 Core规范中的conformance来获取更多信息。
        注：使用UIEvents为输入参数调用DocumentEvent接口的createEvent方法来创建一个UIEvent实例。
        UIEvent接口（定义在DOM2中）
        UIEvent接口为响应的用户交互事件提供了特定的上下文信息。
        接口定义：
        1. // Introduced in DOM Level 2:
        2. interface UIEvent : Event {
        3. readonly attribute views::AbstractView view;
        4. readonly attribute long detail;
        5. void initUIEvent(in DOMString typeArg,
        6. in boolean canBubbleArg,
        7. in boolean cancelableArg,
        8. in views::AbstractView viewArg,
        9. in long detailArg);
        10. };
    • 属性：
      • detail （长整型），只读
        指定事件的一些细节信息。依赖于事件类型。
      • view（views::AbstractView类型），只读
        view属性标识事件从哪个AbstractView产生。
    • 方法：
      • initUIEvent
        该方法用来初始化一个通过DocumentEvent接口创建的UIEvent的值。这个方法只能用来在UIEvent通过dispatchEvent方法调用前使用，虽然在这个阶段它可能会被调用多次。当多次被调用时，以最后一次调用为准。
        参数：
        typeArg（字符串类型）
        指定事件类型
        canBubbleArg（布尔类型）
        指定事件是否能冒泡
        cancelableArg（布尔类型）
        指定是否可以阻止事件的默认行为
        viewArg（views::AbstractView类型）
        指定事件的抽象视图
        detailArg（长整型）
        指定事件的细节信息
        无返回值
        无抛出异常
        这些不同事件的发生场景：
        DOMFocusIn
        当一个事件目标获得焦点时，发生DOMFocusIn事件，例如，通过定位设备的tab键切换到一个元素上。它不同于HTML的focus事件，DOMFocusIn可被任何可获得焦点的事件目标使用，并不单单是表单控制。
      • 是否冒泡：是
      • 是否可取消: 否
      • 上下文信息：无
        DOMFocusOut
        当一个事件目标失去焦点时，发生DOMFocusOut事件。例如通过一个定位设备的tab键将焦点移出一个元素。它不同于HTML的blur事件，DOMFocusOut事件可应用于任何可获得焦点的事件目标，并不单单是表单控制。
      • 是否冒泡：是
      • 是否可取消: 否
      • 上下文信息：无
        DOMActivate
        当一个元素被激活时，发生该事件。例如，通过鼠标点击或按下键盘。一个数字类型的参数将被传入以说明发生了什么：1表示普通的激活（如普通点击或回车），2表示极度活跃（例如双击或shift+Enter）
      • 是否冒泡：是
      • 是否可取消: 是
      • 上下文信息：细节信息（数字类型的值）

        鼠标事件类型

        鼠标事件类型用HTML4.0中列出的事件和DOM0中定义的另外的事件组成。这类事件模型用于鼠标输入设备的使用。
        一个DOM应用可以使用MouseEvents, 2.0为参数调用DOMImplementation接口的hasFeaturee(feature,version)方法来检测实现者是否支持鼠标事件模型。为了全面支持这个模型，一个实现者必须同时支持本规范中定义的Events功能和在DOM2中定义的Views功能。你还可以参照DOM2 Core规范中的conformance来获取更多信息。
        注：以功能字符串MouseEvents为输入参数调用DocumentEvent接口的createEvent方法来创建一个MouseEvent接口的实例。
        MouseEvent接口（DOM2中介绍）
        MouseEvent接口提供相应鼠标事件的上下文信息。
        detail属性继承至UIEvent，指定在用户活动中同一屏幕下鼠标按下和松开的次数。用户开始活动时，值记为1，之后每次连续的单击和松开增1。如果用户在鼠标按下和弹起的过程中移动了鼠标，那么该值会置为0，表明当前无单击事件发生。
        在内嵌元素的鼠标事件发生在更深层次的内嵌元素上时。目标元素的祖先元素会使用冒泡来获取发生在它后代元素上的鼠标事件。
        接口定义：
        1. // Introduced in DOM Level 2:
        2. interface MouseEvent : UIEvent {
        3. readonly attribute long screenX;
        4. readonly attribute long screenY;
        5. readonly attribute long clientX;
        6. readonly attribute long clientY;
        7. readonly attribute boolean ctrlKey;
        8. readonly attribute boolean shiftKey;
        9. readonly attribute boolean altKey;
        10. readonly attribute boolean metaKey;
        11. readonly attribute unsigned short button;
        12. readonly attribute EventTarget relatedTarget;
        13. void initMouseEvent(in DOMString typeArg,
        14. in boolean canBubbleArg,
        15. in boolean cancelableArg,
        16. in views::AbstractView viewArg,
        17. in long detailArg,
        18. in long screenXArg,
        19. in long screenYArg,
        20. in long clientXArg,
        21. in long clientYArg,
        22. in boolean ctrlKeyArg,
        23. in boolean altKeyArg,
        24. in boolean shiftKeyArg,
        25. in boolean metaKeyArg,
        26. in unsigned short buttonArg,
        27. in EventTarget relatedTargetArg);
        28. };
    • 属性：
      • altKey（布尔值类型），只读
        用来指定在事件发生过程中alt键是否被按下，在一些系统中这个键可能被映射为另外的名字。
      • button（无符号短整型），只读
        在鼠标事件发生时，button用来表示哪个鼠标键改变了状态。button的值为0时表示左键，为1时表示中键（如果存在的话），为2时表示右键。对于左手使用鼠标者来说，这些值按从右往左的顺序。
      • clientX（长整型），只读
        事件发生时，相对DOM实现者的用户区域的水平坐标
      • clientY（长整型），只读
        事件发生时，相对DOM实现者的用户区域的垂直坐标
      • ctrlKey（布尔类型），只读
        用来表示当事件发生时，ctrl键是否被按下
      • metaKey（布尔类型），只读
        用来表示当事件发生时，meta键是否被按下。在一些系统中这个键可能被映射为另外的名字。
      • relatedTarget（EventTarget类型），只读
        用来表示UI事件的第二事件目标。当前这个属性在mouseover事件中用来表示指针离开的事件目标，而在mouseout事件中表示指针进入的事件目标。
      • screenX（长整型），只读
        用来表示事件发生时，相对于屏幕坐标系统的水平坐标
      • screenY（长整型），只读
        用来表示事件发生时，相对于屏幕坐标系统的垂直坐标
      • shiftKey（布尔类型），只读
        用来表示当事件发生时，shift键是否被按下
    • 方法
      • initMouseEvent
        该方法用来初始化一个通过DocumentEvent接口创建的鼠标事件。该方法只能在鼠标事件通过dispatchEvent方法调用前使用，虽然它可能会被调用多次。如果被多次调用，则以最后一次调用为准。
        typeArg（字符串类型）
        指定事件的类型
        canBubbleArg（布尔类型）
        指定事件是否可以冒泡
        cancelableArg（布尔类型）
        指定事件是否可以取消其默认事件
        viewArg（views::AbstractView类型）
        指定事件的抽象视图
        detailArg（长整型）
        指定事件的鼠标点击次数
        screenXArg（长整型）
        指定事件在屏幕上的X坐标
        screenYArg（长整型）
        指定事件在屏幕上的Y坐标
        clientXArg（长整型）
        指定事件在用户区域上的X坐标
        clientYArg（长整型）
        指定事件在用户区域上的Y坐标
        ctrlKeyArg（布尔类型）
        指定事件发生时ctrl键是否被按下
        altKeyArg（布尔类型）
        指定事件发生时alt键是否被按下
        shiftKeyArg （布尔类型）
        指定事件发生时shift键是否被按下
        metaKeyArg（布尔类型）
        指定事件发生时meta键是否被按下
        buttonArg（无符号短整型）
        指定事件的鼠标键
        relatedTarget（EventTarget类型）
        指定事件的相关事件目标
        没有返回值
        没有抛出异常
        不同的鼠标事件：
    • click
      当定位设备在一个元素上单击时，发生click事件。一次针对相同屏幕位置的鼠标按下和松开定义为一次单击。事件的发生先后顺序为：mousedown mouseup click
      如果在同一屏幕位置发生了多次点击，那么该序列也随着每次重复多次。该事件对大多数的元素都是可用的。
      • 是否冒泡：是
      • 是否可取消：是
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail
    • mousedown
      当定位设备的键在一个元素上被按下后，发生mousedown事件，该事件对大多数元素可用。
      • 是否冒泡：是
      • 是否可取消：是
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail
    • mouseup
      当定位设备的键在一个元素上被松开时，发生mouseup事件，该事件对大多数元素可用。
      • 是否冒泡：是
      • 是否可取消：是
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button, detail
    • mouseover
      当定位设备移动到一个元素上时，发生mousemove事件，该事件对大多数元素可用
      • 是否冒泡：是
      • 是否可取消：是
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedTarget指定了定位设备从哪个事件目标离开
    • mousemove
      当定位设备在一个元素上移动时，发生mousemove事件。该事件对大多数元素可用。
      • 是否冒泡：是
      • 是否可取消：否
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey
    • mouseout
      当定位设备从一个元素上移开时，发生mouseout事件。该事件对大多数元素可用
      • 是否冒泡：是
      • 是否可取消：是
      • 上下文信息：screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, relatedTarget指定了定位设备从哪个事件目标进入

        键盘事件

        DOM2事件规范没有支持键盘事件模型。针对键盘输入设备的事件模型定义在之后的DOM规范中。

        突变事件类型

        该事件类型用来对文档树的改变做出通知，包含对属性或文字的改变。突变事件都是不可冒泡的。因为根据相关事件的取消，如果文档树发生了改变，对于改变文档树的目前DOM接口使用非常难。
        文档树的很多单一改变都会引起多种突变事件被触发。这些事件会被留给实现者，而不是根据文档树的没有可能的改变去定义这些事件。
        一个DOM应用以MutationEvents和2.0为参数使用DOMImplementation接口的hasFeature(feature,version)方法来检测实现者支持了突变事件。为了全面支持这个模型，一个实现者必须同时支持本规范中定义的Events功能。你还可以参照DOM2 Core规范中的conformance来获取更多信息。
        注：使用字符串'MutationEvents'为输入参数调用DocumentEvent接口的createEvent方法来创建一个MutationEvent接口。
        突变事件接口（定义在DOM2中）
        MutationEvent接口提供相应的突变事件的上下文信息。
        接口定义：
        1. // Introduced in DOM Level 2:
        2. interface MutationEvent : Event {
        3. // attrChangeType
        4. const unsigned short MODIFICATION = 1;
        5. const unsigned short ADDITION = 2;
        6. const unsigned short REMOVAL = 3;
        7. readonly attribute Node relatedNode;
        8. readonly attribute DOMString prevValue;
        9. readonly attribute DOMString newValue;
        10. readonly attribute DOMString attrName;
        11. readonly attribute unsigned short attrChange;
        12. void initMutationEvent(in DOMString typeArg,
        13. in boolean canBubbleArg,
        14. in boolean cancelableArg,
        15. in Node relatedNodeArg,
        16. in DOMString prevValueArg,
        17. in DOMString newValueArg,
        18. in DOMString attrNameArg,
        19. in unsigned short attrChangeArg);
        20. };
        attrChangeType:
        一个用来指定属性是通过何种方式改变的整型。
    • 恒量：
      ADDITION
      仅仅是添加属性
      MODIFICATION
      属性被改变
      REMOVEL
      属性被删除
    • 属性：
      attrChange（无符号短整型），只读
      该属性说明了是那种类型的改变触发了DOMAttrModified事件。该属性值可能为MODIFICATION,ADDITION,REMOVAL
      attrName（字符串类型），只读
      该属性说明了在DOMAttrModified事件中发生改变的属性节点。
      newValue（字符串类型），只读
      该属性说明了DOMAttrModified事件中属性节点的新值，或DOMCharDataModified事件中CharacterData节点的新值。
      prevValue（字符串类型），只读
      该属性说明了DOMAttrModified事件中属性节点的原值，或DOMCharDataModified事件中CharacterData节点的原值。
      relatedNode（节点类型），只读
      该属性用来表示和突变事件相关的节点。例如一个节点上的突变事件表明了它的父元素发生了改变，那么这个relatedNode就是发生改变的父元素。在子结构上发生的时间表明一个节点内部发生了改变，那么relatedNode就是这个发生改变的节点。在DOMAttrModified事件中，relatedNode属性表示发生了改变，添加或删除的节点。
    • 方法：
      initMutationEvent
      该方法用来初始化一个通过DocumentEvent接口创建的MutationEvent。该方法只能在MutationEvent被通过dipatchEvent方法调用前调用，虽然必要时在这个阶段它可能被调用多次。如果被调用多次，则按最后一个调用为准。
      参数:
      typeArg（字符串类型）
      指定事件类型
      canBubbleArg（布尔类型）
      指定事件是否可以冒泡
      cancelableArg（布尔类型）
      指定事件是否可以取消其默认行为
      relatedNodeArg（节点类型）
      指定事件的相关目标
      prevValueArg（字符串类型）
      指定事件的prevValue属性。该值可能为null。
      newValueArg（字符串类型）
      指定事件的newValue属性。该值可能为null。
      attrNameArg（字符串类型）
      指定事件的attrName属性。该值可能为null。
      attrChangeArg（无符号短整型）
      指定事件的attrChange属性。
      无返回值
      无抛出异常
      不同形式的突变事件：
    • DOMSubtreeModified
      这是针对所有文档改变的常用事件。它可以替换以下列出的更多特定事件。可能会在文档发生某个改变后被触发，或者根据实现者的实现，在多种改变发生后被触发。后一种使用方式通常用来适应同时发生的或突然发生的多种改变。该事件的目标为已经发生的最基本改变。在突变事件被触发引起的事件后会触发该事件。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • DOMNodeInserted
      当一个节点被添加为另一个节点的子元素时触发该事件。当节点插入后该事件被触发。该事件的目标为被插入的节点。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：relatedNode处理父节点
    • DOMNodeRemoved
      当一个节点从它的父元素中删除时发生该事件。在节点被从树中移除前触发该事件。该事件的目标为被移除的节点。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：relatedNode处理父节点
    • DOMNodeRemovedFromDocument
      当一个节点从树中被删除时发生该事件，不管是直接删除还是它包含的子树被删除。在删除发生前触发该事件。该事件的目标为被移除的节点。如果节点是被直接删除的，DOMNodeRemoved事件将会在DOMNodeRemovedFromDocument事件前发生。
    • DOMNodeInsertedIntoDocument
      当一个节点被插入到文档中时发生该事件，不管是直接插入还是内部子数的插入。在插入前触发该事件。该事件的目标为被插入的节点。如果节点是被直接插入的，DOMNodeInserted事件会在DOMNodeInsertedIntoDocument事件前发生。
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：无
    • DOMAttrModified
      当一个节点上的一个属性被改变时发生该事件。该事件的目标为发生属性改变的节点。attrChange的值表明了属性是被改变、添加还是删除。relatedNode的值表示被影响到属性节点的节点。基于属性值改变的字符串有望被映射为属性的改变。属性节点随后的改变会被映射为上一个属性的删除和第二个属性的添加。
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：attrName, attrChange, prevValue, newValue, relatedNode
    • DOMCharacterDataModified
      当节点的CharacterData被改变但节点本身没有被插入或删除时发生该事件。PI元素的改变也会触发该事件。该事件的目标为Character节点。
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：prevValue, newValue

    HTML事件类型

    HTML事件由HTML4.0中的事件和定义在DOM0中的另外的事件组成。
    一个DOM应用使用'HTMLEvents'和'2.0'为参数使用DOMImplementation接口的hasFeature(feature,version)方法来检测实现者是否支持HTML事件模型。为了全面支持这个模型，一个实现者必须同时支持本规范中定义的Events功能。你还可以参照DOM2 Core规范中的conformance来获取更多信息。
    注：使用'HTMLEvents'为输入参数使用DocumentType接口的createEvent方法来为HTML事件模型创建一个Event实例。
    HTML事件使用基本DOM事件接口来传递上下文信息。
    各种HTML事件：

    • load
      当DOM实现者完成了文档中的所有内容、FRAMESET中的所有框架或一个OBJECT元素的加载时发生该事件。
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：无
    • unload
      当DOM实现者将一个文档从窗口或框架中删除时发生该事件。该事件对BODY和FRAMESET元素可用。
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：无
    • abort
      当一个图片被完全加载前页面加载被停止时，发生该事件。该事件应用于OBJECT元素。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • error
      当一个图片没被正确加载或在脚本执行时发生错误时发生该事件。该事件对OBJECT元素可用。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • select
      当用户在文本区域选中了一些文字时发生该事件。该事件对INPUT元素和TEXTAREA元素可用。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • change
      在一个输入框获取焦点后其值发生了改变，发生该事件。该事件对于INPUT,SELECT，TEXTAREA元素可用。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • submit
      当提交表单时发生该事件。该事件只对FORM元素可用
      • 是否冒泡：是
      • 是否可取消默认事件：是
      • 上下文信息：无
    • reset
      当表单被重置时发生该事件。该事件只能应用于FORM元素
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • focus
      当一个元素获得焦点时发生该事件，不管是通过定位设备或是通过tab切换。该事件对以下元素可用：LABEL, INPUT, SELECT, TEXTAREA, and BUTTON
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：无
    • blur
      当一个元素失去焦点时发生该事件，不管是通过定位设备或是通过tab切换。该事件对以下元素可用：LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
      • 是否冒泡：否
      • 是否可取消默认事件：否
      • 上下文信息：无
    • resize
      当文档视图的尺寸被调整时发生该事件。
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
    • scroll
      当文档视图被滚动时发生该事件
      • 是否冒泡：是
      • 是否可取消默认事件：否
      • 上下文信息：无
  • 相关阅读:
    手机各种JS语法，随时更新
    ionic上拉加载-下拉刷新
    JS获取浏览器信息及屏幕分辨率
    jQuery元素的显示、隐藏及动画
    jQuery原型
    表单序列化为对象
    html里的ajax数据传输
    面试技巧-互联网行业通吃
    jquery表单验证validate
    Javascript缓动动画原理
  • 原文地址：https://www.cnblogs.com/rubyisaPM/p/4479817.html
Copyright © 2011-2022 走看看