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

摘要：一般化的变动事件。没有对应的级事件事件被分散到其他类别中。与事件关联的视图。布尔值表示按下的键的键码。布尔值表示事件是否应该冒泡。创建事件对象初始化事件对象触发事件

可以在 document 对象上使用 createEvent() 方法创建 event 对象。

UIEvents ：一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent 。

MouseEvents ：一般化的鼠标事件。DOM3 级中是 MouseEvent 。

MutationEvents ：一般化的 DOM 变动事件。DOM3 级中是 MutationEvent 。

HTMLEvents ：一般化的 HTML 事件。没有对应的 DOM3 级事件（HTML 事件被分散到其他类 别中）。

在创建了 event 对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的 event 对象都有一个特殊的方法，为它传入适当的数据就可以初始化该 event 对象。不同类型的这个方法的名字也不相同，具体要取决于 createEvent() 中使用的参数。模拟事件的最后一步就是触发事件。这一步需要使用 dispatchEvent() 方法，所有支持事件的DOM 节点都支持这个方法。调用 dispatchEvent() 方法时，需要传入一个参数，即表示要触发事件的 event 对象。触发事件之后，该事件就跻身“官方事件”之列了，因而能够照样冒泡并引发相应事件处理程序的执行。

模拟鼠标事件

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

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时使用。

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() 方法，这个方法接收下列参数。

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

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

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

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

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

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

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

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() 的方法。

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

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