使用 JavaScript 可以在任意时刻触发特定的事件，可以这些事件就跟正常事件一样会冒泡。模拟事件技术，一般用于测试 web 应用程序。DOM2 级规范规定了模拟特定事件的方式，IE9、Opera、Firefox、Chrome 和 Safari 都支持。
在 document 对象上调用 createEvent() 方法来创建 event 对象。它接收一个参数，表示要创建的事件类型字符串。在 DOM2 级规范中，事件类型字符串是英文复数形式，DOM3 级中都变成了单数！
事件类型字符串列表：
DOM2 级事件类型
DOM3 级事件类型
说明
UIEvents
UIEvent
UI 事件
MouseEvents
MouseEvent
鼠标事件
MutationEvents
MutationEvent
DOM 变动事件
HTMLEvents
-
HTML 事件
注意，在 DOM3 级事件中才规定了键盘事件！
创建了 event 对象后，还需要使用与事件有关的信息对其初始化。
模拟事件的最后一步就是触发事件（dispatchEvent()），触发事件后，这个事件就是官方版本的事件咯，它可以冒泡并引发相应事件处理程序的执行。
1 模拟鼠标事件
为 createEvent() 传入 “MouseEvents”，它会返回一个对象，这个对象包含 initMouseEvent() 方法，这个方法接收下面 15 个参数：
参数
类型
说明
type
字符串
要触发的事件类型。
bubbles
布尔值
是否冒泡。为了精确模拟，建议设置为 true。
cancelable
布尔值
事件是否可取消。为了精确模拟，建议设置为 true。
view
对象
与事件关联有关的视图，总是 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 时用到。
initMouseEvent() 的参数是与鼠标事件的 event 对象所包含的属性一一对应的！前 4 个参数对于正确激发事件很重要；其他参数只在事件处理程序中才会用到。把 event 对象传给 dispatchEvent() 时，这个对象的 target 会自动被设置。现在我们来模拟鼠标单击事件：
<input type="button" value="Click Me" id="myBtn">
<script type="text/javascript" src="EventUtil.js"></script>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
EventUtil.addHandler(btn,"click",function (event) {
console.log("点过咯");
});
//创建事件对象
var event = document.createEvent("MouseEvents");
//初始化事件对象
event.initMouseEvent("click",true,document.defaultView,false,null);
//触发事件
btn.dispatchEvent(event);
</script>
兼容 DOM 的浏览器，也可以通过类似的方式来模拟其他鼠标事件，比如 dblclick。
2 自定义 DOM 事件
DOM3 级定义了“ 自定义 DOM 事件”，利用它，可以让开发人员创建自己的事件。调用 createEvent(“CustomEvent”)，返回的对象包含 initCustomEvent() 方法，它接受 4 个参数：
参数
类型
说明
type
字符串
触发的事件类型。
bubbles
布尔值
是否冒泡。
cancelable
布尔值
是否可取消。
detail
对象
任意值，会保存在 event 对象的 detail 属性中。
<div id="myDiv"></div>
<script type="text/javascript" src="EventUtil.js"></script>
<script type="text/javascript">
var div = document.getElementById("myDiv"),event;
EventUtil.addHandler(div,"myevent",function (event) {
console.log("div:"+event.detail);
});
EventUtil.addHandler(document,function (event) {
console.log("document:"+event.detail);
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
event=document.createEvent("CustomEvent");
event.initCustomEvent("myevent","Hello world!");
div.dispatchEvent(event);
}
</script>
IE9+ 、 Firefox 6+ 和 chrome 支持自定义 DOM 事件。
