说说 JavaScript 事件流之模拟事件

使用 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, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, 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,"myevent", function (event) {        console.log("document:"+event.detail);    });    if(document.implementation.hasFeature("CustomEvents","3.0")){        event=document.createEvent("CustomEvent");        event.initCustomEvent("myevent",true,false,"Hello world!");        div.dispatchEvent(event);    }</script>

IE9+ 、 Firefox 6+ 和 chrome 支持自定义 DOM 事件。