JavaScript：模拟事件

淡淡的烟草味﹌ 2022-09-29 06:11 222阅读 0赞

事件经常由用户操作或通过其他浏览器功能来触发。  
但是，其实开发者也可以使用 JavaScript 在任意时刻来触发特定的事件，而且使用JavaScript触发的事件就如同浏览器创建的事件一样。也就是说，这些事件该冒泡还会冒泡，而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序。

# DOM中的事件模拟 #

创建：可以在 document 对象上使用 **createEvent()**方法创建 event 对象。这个方法接收一个参数，即表示要创建的事件类型的字符串。

1、UIEvents:一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent。  
2、MouseEvents:一般化的鼠标事件。DOM3 级中是 MouseEvent。  
3、MutationEvents:一般化的 DOM 变动事件。DOM3 级中是 MutationEvent。  
4、HTMLEvents:一般化的 HTML 事件。没有对应的 DOM3 级事件(HTML 事件被分散到其他类别中)。

初始化：在创建了 event 对象之后，还需要使用与事件有关的信息对其进行**初始化**。每种类型的 event 对象都有一个特殊的方法，为它传入适当的数据就可以初始化该 event 对象。不同类型的这个方法的名字也不相同，具体要取决于 createEvent()中使用的参数。

触发：模拟事件的最后一步就是触发事件。这一步需要使用 dispatchEvent() 方法，所有支持事件的 DOM 节点都支持这个方法。调用 dispatchEvent()方法时，需要传入一个参数，即表示要触发事件的 event 对象。触发事件之后，该事件就跻身“官方事件”之列了，因而能够照样冒泡并引发相应事 件处理程序的执行。

## 鼠标事件的模拟 ##

创建对象时传入MouseEvents，并采用event.initMouseEvent方法初始化：

//创建事件对象
    var event = document.createEvent("MouseEvents");
    
    //初始化事件对象
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);

initMouseEvent函数接受15个参数，它们的意义如下：

> type(字符串):表示要触发的事件类型，例如”click”。  
>  bubbles(布尔值):表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true。  
>  cancelable(布尔值):表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为 true。  
>  view(AbstractView):与事件关联的视图。这个参数几乎总是要设置为 document.defaultView。  
>  detail(整数):与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为 0。  
>  screenX(整数):事件相对于屏幕的 X 坐标。  
>  screenY(整数):事件相对于屏幕的 Y 坐标。  
>  clientX(整数):事件相对于视口的 X 坐标。  
>  clientY(整数):事件想对于视口的 Y 坐标。  
>  ctrlKey(布尔值):表示是否按下了 Ctrl 键。默认值为 false。  
>  altKey(布尔值):表示是否按下了 Alt 键。默认值为 false。  
>  shiftKey(布尔值):表示是否按下了 Shift 键。默认值为 false。  
>  metaKey(布尔值):表示是否按下了 Meta 键。默认值为 false。  
>  button(整数):表示按下了哪一个鼠标键。默认值为 0。  
>  relatedTarget(对象):表示与事件相关的对象。这个参数只在模拟 mouseover 或 mouseout时使用。

## 模拟 HTML 事件 ##

和模拟鼠标事件的过程很相似：

var event = document.createEvent("HTMLEvents");
    event.initEvent("focus", true, false);
    target.dispatchEvent(event);

## 自定义 DOM 事件 ##

DOM3 级还定义了“自定义事件”。它的目的是让开发人员创建自己的事件。

要创建新的自定义事件，可以调用 createEvent(“CustomEvent”)。返回的对象有 一个名为 initCustomEvent()的方法，接收如下 4 个参数。

> type(字符串):触发的事件类型，例如”keydown”。  
> bubbles(布尔值):表示事件是否应该冒泡。  
> cancelable(布尔值):表示事件是否可以取消。  
> detail(对象):任意值，保存在 event 对象的 detail 属性中。

示例代码：

这个例子创建了一个冒泡事件”myevent”。而 event.detail 的值被设置成了一个简单的字符串， 然后在div元素和 document 上侦听这个事件。因为 initCustomEvent()方法已经指定这个事件应该冒泡，所以浏览器会负责将事件向上冒泡到 document。

## IE中的事件模拟 ##

var btn = document.getElementById("myBtn");
    //创建事件对象
    var event = document.createEventObject();
    //初始化事件对象 
    event.screenX = 100; 
    event.screenY = 0; 
    event.clientX = 0; 
    event.clientY = 0; 
    event.ctrlKey = false; 
    event.altKey = false;
    event.shiftKey = false;
    event.button = 0;
    //触发事件 
    btn.fireEvent("onclick", event);

与DOM的方法不同，document.createEventObject结果会返回一个通用的 event 对象，然后我们手动为它添加必要信息即可。

最后在调用 fireEvent()方法触发事件时，再为 event 对象添加 srcElement 和 type 属性。