第61节 模拟和自定义事件Event-Web前端开发之-JavaScript-王唯

本内容是用于Web前端开发的Javascript视频的课件，请通过Master Brother JavaScript视频课程学习。

模拟事件：

事件通常由用户操作或通过其他浏览器功能触发，或者javascript可以随时用于触发特定事件，就像浏览器创建的事件一样，即通过Javascript模拟触发事件;

DOM2级别指定如何模拟特定事件，这是标准浏览器支持的，IE有自己的模拟事件的方式;

doM 中的事件模拟：

您可以使用 double 对象上的 type 方法创建对象，该对象接受表示要创建的事件类型的类型字符串参数;

type参数只能传递事件模块中定义的值，在DOM2级别中，所有这些字符串都采用英语复数形式，并且在DOM3级别中变为单数;

事件： 通用事件类;

UI事件：一般的UI事件，鼠标事件和键盘事件继承自UI事件，DOM3级别是UI事件;

鼠标事件：一般鼠标事件，DOM3级别为鼠标事件;

键盘事件：

突变事件：一般DOM更改事件，DOM3级别为突变事件;

HTML事件：一般的HTML事件，没有对应的DOM3级事件，因为在DOM3事件中，HTML事件被分散到其他类别中;

TextEvents： DOM3 is TextEvent;

自定义事件：自定义事件;

还有其他事件模块，如SVGEvents，MessageEvent，ProgressEvent，AnimationEvent，TransitionEvent等;

DOM2级事件没有专门指定键盘事件，在DOM3事件中给键盘事件规定;

创建事件对象后，还需要使用与事件相关的信息对其进行初始化;每种类型的事件对象都有一个特殊的方法来传递适当的数据，以便它初始化事件对象，但不同类型的方法的名称各不相同，具体取决于secretEvent（）;

Event 模块的事件对象可以使用 Event.initEvent（） 方法进行初始化;语法： event.initEvent （type， bubbles， cancelable）;参数： 类型： 定义事件名称;气泡：一个布尔值，是否冒泡;可取消：一个布尔值，是否可以取消;

事件模块及其初始化方法：

UIEvents：event.initUIEvent;

MouseEvents：initMouseEvent;

MutationEvents：initMutationEvent;

HTMLEvents：event.initEvent;

TextEvent：event.initTextEvent;

KeyboardEvent：event.initKeyboardEvent;

CustomEvent：event.initCustomEvent;

这些初始化方法中的参数是不同的，由其事件类型确定，例如：

模拟事件的最后一步是使用 dispatchEvent（） 方法触发事件，该方法需要传递给表示要触发的事件的事件对象;

事件触发后，事件可以像正常事件一样冒泡，正常可以引发相应事件处理程序的执行;

dispatchEvent（） 方法返回一个布尔值，当事件可取消（可取消为 true）时，该值为 false，并且该事件至少有一个名为 preventDefault（） 的事件处理程序;

如果在调用之前未初始化 dispatchEvent（） 方法，则会引发UNSPECIFIED_EVENT_TYPE_ERR异常，或者如果事件类型为 null 或事件处理程序为空字符串，则会引发未捕获的异常;

模拟鼠标事件：

方法创建并返回一个模拟鼠标事件的对象，该对象具有一个名为 initMouseEvent（） 的方法，该方法指定有关鼠标事件的信息，该事件接受 15 个参数，鼠标事件中每个典型属性一个参数，如下所示：

类型（字符串）：表示要触发的事件的类型（例如：单击）;

气泡：指示事件是否应冒泡;

可取消：表示事件是可以取消的;

抽象视图：与事件关联的视图，几乎总是设置为 docment.defaultView;

detail：与事件相关的详细信息，此值通常仅由事件处理程序使用，但通常设置为 0;

screenX（整数）：事件的X坐标相对于屏幕;

screenY（整数）：事件相对于屏幕的 Y 坐标;

clientX（整数）：事件的 X 坐标相对于视口;

clientY（整数）：事件相对于视口的 Y 坐标;

CtrlKey：是否按Ctrl键，默认值为false;

altKey（布尔值）：无论是否按下Alt键，默认值为false;

shiftKey：是否按下Shift键，默认为false;

元键（布尔值）：是否按下元键，默认值为false;

button（整数）：按下了哪个鼠标按钮，默认为0;

相关目标（对象）：表示与事件相关的对象，该参数仅在模拟鼠标悬停和鼠标悬停时使用;

其中，前四个参数对于正确的触发事件至关重要，其余所有参数仅用于事件处理程序;

当一个对象被传递给 dispatchEvent（） 方法时，该对象的目标属性会自动设置;

在兼容的DOM浏览器中，也可以以相同的方式模拟其他鼠标事件，例如dblclick;

模拟键盘事件：

DOM3级别声明可以通过调用createEvent（）并传入"keyboardEvent"来创建键盘事件;

类型（字符串）：表示要触发的事件的类型;

气泡：指示事件是否应冒泡;

可取消：表示事件是可以取消的;

抽象视图：与事件关联的视图。此参数几乎总是设置为 docment.defaultView;

键（字符串）：表示按下的键的键代码;

位置：指示按键的位置：0 表示默认主键盘，1 表示左侧，2 表示右侧，3 表示数字键盘，4 表示移动设备（即虚拟键盘），5 表示手柄;

ctrlKey：

altKey：

移位键：

元键：

重复：您连续按此键多少次;

由于 DOM3 级别不促进按键事件的使用，因此此技术只能用于模拟按键和键控事件，例如：

但是，此参数顺序在IE中不正常，但它可以使用公共事件;

首先创建一个泛型事件，然后调用 initEvent（） 方法对其进行初始化，即向事件对象添加键盘上特定于事件的信息（或不添加），例如：

在这里，您必须使用通用事件，而不是UI事件，因为UI事件不允许向对象添加新属性;

像这样的模拟事件会触发键盘事件，但不会向文本框写入文本，因为无法准确模拟键盘事件;

模拟变更事件：

您可以使用createEvent（"MutationEvents"）创建一个包含initMutationEvent（）方法的变量事件对象，该方法接受诸如类型，气泡，可取消，相关节点，预值，newValue，attrName和attrChange等参数;

其他更改事件也以上述格式创建，只需要更改参数;

模拟 HTML 事件：

通过 createEvent（"HTMLEvents"），您可以使用对象的 initEvent（） 方法初始化对象;

自定义 DOM 事件：

DOM3级别还定义了"自定义事件"，这些事件不是由DOM本机触发的，旨在允许开发人员创建自己的事件;

若要创建自定义事件，可以调用 "CustomEvent" 方法，该方法返回一个名为 initCustomEvent（） 的对象，该对象接收四个参数：

type（字符串）：表示要触发的事件的类型，例如"keydown";

detail（对象）：保存在对象的目标属性中的任何值;

您创建的自定义事件对象可以像其他事件一样在 DOM 中分配，例如：

IE 中的事件模拟：

IE8及以下不支持dom模拟事件，它有一组专用的API，这类似于DOM思维：先创建对象，然后为其指定适当的信息，然后使用对象触发事件;

调用 document.createEventObject（） 方法会在 IE 中创建一个 eent 对象，该对象不接受参数并返回一个通用事件对象 srcElement 和 type 属性会自动添加到该对象中，其他属性必须手动添加，并且使用相同的模式来模拟任何 IE 支持的事件;

为事件对象添加的属性可以是免费的，没有限制，即使添加的属性IE不支持也可以，添加的属性对事件没有影响，因为只有事件处理才会使用它们;

同一模式还可以模拟触发按键事件;

与DOM一样，文本框中不输出任何字符;

由于鼠标事件、键盘事件和其他事件的事件对象没有什么不同，因此可以使用通用对象来触发任何类型的事件。

自定义事件：

不再建议使用 Document.createEvent（），建议使用各种事件类型的构造函数来创建事件;

事件类：

表示在 DOM 中发生的事件，DOM 是其他类型的事件的基类，包含适用于所有事件的属性和方法;

构造函数： Event（）， 创建并返回一个 Event 对象;

EventInit 是可选的，并且是接受以下字段的 EventInit 类型字典对象：

"气泡"，可选，布尔类型，默认值为false，指示事件是否冒泡;

"可取消"，可选，布尔类型，默认值为false，指示是否可以取消事件;

"composed"，可选，布尔类型，默认为false，指示事件是否会触发Shadow DOM根节点外的侦听器;

类型 OfArg 事件类型，即它可以是内置事件或自定义事件;

创建事件后，需要使用 dispatchEvent（）;

注意： 事件 event.isTrusted 属性可用于区分用户触发或脚本触发;

此外，自定义事件应使用 addEventListener，因为< >仅在内置事件中使用。

IE不支持使用构造函数创建事件，只能用document.createEvent（）方法替换;

如：

许多内置事件都有默认行为，但对于自定义事件没有默认行为，但是当调用该方法时，dispatchEvent（） 方法返回 false，因此该方法在自定义事件中用于特殊目的，例如调用方法，根据该方法，事件处理程序可以发送信号以确定应如何执行以下操作， 如：

例：

常见事件子类：

自定义事件：自定义事件类;

设备输入事件：旋转移动设备事件类;（例如，获取事件的旋转 x、y 和 Z 轴的角度等）

DragEvent：拖放事件类，它们继承事件类和鼠标事件类;

错误事件： 错误事件类;

FocusEvent：表示从 UIEvent 类继承的与焦点相关的事件类;

键盘事件：键盘事件类

MouseEvent：鼠标事件类，继承自 UIEvent 类;

突变事件：更改事件类;

TouchEvent：Touch Event 类，继承自 UIEvent 类;

用户界面事件;

WheelEvent：鼠标滚轮或类似输入设备的事件类;

不同的事件类型具有不同的标准属性，例如用于鼠标事件的 clientX 和 clitY，例如：

但是，如果使用事件构造函数（将 MouseEvent 替换为事件），则 clintX 和 clintY 属性不是其标准属性，会直接被忽略。

创建自定义事件事件：

例如，将上面示例中的新事件交换为新的 CustomEvent 具有相同的结果，但 CustomEvent 对象具有一个 detail 属性，您可以使用该属性传递某些信息，这些信息可以是任何类型的数据，例如：

您甚至可以直接在 dispatchEvent（） 方法中实例化 Event 对象，例如：

创建一个 MouseEvent 事件，语法：事件 s new MouseEvent （typeArg， mouseEventInit）;参数 typeArt 是事件名称，可选参数 mouseEventInit 是初始化 MouseEvent 的字典对象，其工作方式与上面的 initMouseEvent（） 方法相同，例如：

创建 KeyboardEvent 事件，语法：event- new KeyboardEvent（typeArg，KeyboardEventInit），参数 typeEarg 作为事件名称，keyboardEventInit 作为字典对象，具有以下值：

"key"，可选，默认为""，对应于keyevent.key的值;

"code"，可选，默认为""，对应于 KeyboardEvent.code 的值;

"location"，可选，默认为 0，无符号长类型，设置 KeyboardEvent.location 的值。

"ctrlKey"，可选，默认 false，布尔类型，设置 KeyboardEvent.ctrlKey 的值。

"shiftKey"，可选，默认 false，布尔类型，设置 KeyboardEvent.shiftKey 的值。

"altKey"，可选，默认 false，布尔类型，设置 KeyboardEvent.altKey 的值。

"metaKey"，可选，默认 false，布尔类型，设置 KeyboardEvent.metaKey 的值。

"repeat"，可选，默认为 false，布尔类型，设置 KeyboardEvent.repeat 的值。

"isComposing"，可选，默认 false，布尔类型，设置 KeyboardEvent.isComposing 的值。

"charCode"，可选，默认为 0，无符号长类型，设置 KeyboardEvent.charCode 的值（已丢弃）。

"keyCode"，可选，默认为 0，无符号长类型，设置 KeyboardEvent.keyCode 的值（丢弃）。

"where"，可选，默认为 0，无符号长类型，设置 KeyboardEvent.with 的值（丢弃）。

KeyboardEventInit字典也可以接受来自UIEventInit和EventInit的字典字段值;

设置 KeyboardEventInit 参数：

自定义事件的工作原理：

事件本质上是一条消息，事件模式是一种称为观察者的设计模式，这是一种用于创建松散耦合代码的技术;

观察者模式由两种类型的对象组成：主体和观察者;主体负责发布事件，而观察者通过订阅这些事件来观察主体;模式的一个关键概念是，主体对观察者一无所知，也就是说，即使观察者不存在，它也可以单独存在并正常运作;

最原始的自定义事件，例如：

自定义事件本质上是一个调用的函数;

最简单的自定义事件，例如：

简单事件类：

事件对象可以注册多个事件，例如：

您还可以修改 dispatchEvent（） 方法以传递类似事件的对象，例如：

应用：