说说 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 事件。