《Javascript高级程序设计 (第三版)》第13章 事件

模拟事件

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 对象。触发事件之后，该事件就跻身“官方事件”之列了，因而能够照样冒泡并引发相应事件处理程序的执行。

• 模拟鼠标事件

创建鼠标事件对象的方法是为 createEvent() 传入字符串 "MouseEvents" 。返回的对象有一个名为 initMouseEvent() 方法，用于指定与该鼠标事件有关的信息。这些参数的含义如下。

1. type （字符串）：表示要触发的事件类型，例如 "click" 。

2. bubbles （布尔值）：表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true 。

3. cancelable （布尔值）：表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为 true 。

4. view （AbstractView）：与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

5. detail （整数）：与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为 0 。

6. screenX （整数）：事件相对于屏幕的 X 坐标。

7. screenY （整数）：事件相对于屏幕的 Y 坐标。

8. clientX （整数）：事件相对于视口的 X 坐标。

9. clientY （整数）：事件想对于视口的 Y 坐标。

10. ctrlKey （布尔值）：表示是否按下了 Ctrl 键。默认值为 false 。

11. altKey （布尔值）：表示是否按下了 Alt 键。默认值为 false 。

12. shiftKey （布尔值）：表示是否按下了 Shift 键。默认值为 false 。

13. metaKey （布尔值）：表示是否按下了 Meta 键。默认值为 false 。

14. button （整数）：表示按下了哪一个鼠标键。默认值为 0 。

15. relatedTarget （对象）：表示与事件相关的对象。这个参数只在模拟 mouseover 或 mouseout时使用。

initMouseEvent() 方法的这些参数是与鼠标事件的 event 对象所包含的属性一一对应的。其中，前 4 个参数对正确地激发事件至关重要，因为浏览器要用到这些参数；而剩下的所有参数只有在事件处理程序中才会用到。当把 event 对象传给 dispatchEvent() 方法时，这个对象的 target属性会自动设置。

var btn = document.getElementById("myBtn");
//创建事件对象
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);

• 模拟键盘事件
  调用 createEvent() 并传入"KeyboardEvent" 就可以创建一个键盘事件。返回的事件对象会包含一个 initKeyEvent() 方法，这个方法接收下列参数。

1. type （字符串）：表示要触发的事件类型，如 "keydown" 。

2. bubbles （布尔值）：表示事件是否应该冒泡。为精确模拟鼠标事件，应该设置为 true 。

3. cancelable （布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true 。

4. view （ AbstractView ）：与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

5. key （布尔值）：表示按下的键的键码。

6. location （整数）：表示按下了哪里的键。0 表示默认的主键盘，1 表示左，2 表示右，3 表示 数字键盘，4表示移动设备（即虚拟键盘），5 表示手柄。

7. modifiers （字符串）：空格分隔的修改键列表，如 "Shift" 。

8. repeat （整数）：在一行中按了这个键多少次。

var textbox = document.getElementById("myTextbox"),event;

if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
    event = document.createEvent("KeyboardEvent");
//初始化事件对象
    event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",0, "Shift", 0);
}
//触发事件
textbox.dispatchEvent(event)

• 模拟其他事件
  模拟变动事件和HTML 事件。

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

• 自定义 DOM 事件

  自定义事件不是由 DOM 原生触发的，它的目的是让开发人员创建自己的事件。要创建新的自定义事件，可调用 createEvent("CustomEvent") 。返回的对象有一个名为 initCustomEvent() 的方法。

1. type （字符串）：触发的事件类型，例如 "keydown"。

2. bubbles （布尔值）：表示事件是否应该冒泡。

3. cancelable （布尔值）：表示事件是否可以取消。

4. 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);
});
if (document.implementation.hasFeature("CustomEvents", "3.0")){
    event = document.createEvent("CustomEvent");
    event.initCustomEvent("myevent", true, false, "Hello world!");
    div.dispatchEvent(event);
}

IE中的事件模拟

调用 document.createEventObject() 方法可以在 IE 中创建 event对象。(不接受参数，结果会返回一个通用的 event 对象)
目标上调用 fireEvent()方法，这个方法接受两个参数：事件处理程序的名称和 event 对象。

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);