JavaScript：模拟事件

事件经常由用户操作或通过其他浏览器功能来触发。
但是，其实开发者也可以使用 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 属性中。

示例代码：

var div = document.getElementById("myDiv"),event;
EventUtil.addHandler(div, "myevent", function(event){
    alert("DIV: " + event.detail);
});
EventUtil.addHandler(document, "myevent", function(event){
    alert("DOCUMENT: " + event.detail);
});
// 检测是否支持dom3
if (document.implementation.hasFeature("CustomEvents", "3.0")){ 
    event = document.createEvent("CustomEvent"); 
    event.initCustomEvent("myevent", true, false, "Hello world!"); 
    div.dispatchEvent(event);
}

这个例子创建了一个冒泡事件”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 属性。