#Javascript高级编程读书笔记#13.6 模拟事件

13.6 模拟事件

Javascript 可以在任意时刻触发特定的事件，就如同浏览器创建的事件一样，这些事件该冒泡还会冒泡，也照样能够导致浏览器执行已经指定的处理它们的事件处理程序，在测试 Web 应用程序中极为有用，IE9、Opera、Firefox、Chrom、Safari都支持，IE有它自己模拟事件的方式。

在 document 对象上使用 createEvent() 创建 event 对象，接收一个表示要创建的事件类型的字符串的参数，比如

• UIEvent(s): 一般化的UI事件（DOM2有s）
• MouseEvent(s):一般化的鼠标事件
• MutationEvent(s): 一般化的DOM变动事件
• HTMLEvents: 一般化的HTML事件，没有对应的DOM3事件，被分散到其它类别中

创建 event 对象后要使用与事件有关信息对其初始化。每种类型的 event 对象都有一个特殊方法，为它传入适当数据就可以初始化该对象，不同类型的方法的名字也不相同。

触发事件需要使用 dispatchEvent( 要触发事件的 event 对象) 方法，触发之后该事件就跻身“官方事件”之列。

创建 event 对象、使用事件有关信息初始化、最后触发事件

模拟鼠标事件举例

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.dispathEvent(event);

模拟键盘事件举例

// 本例模拟按住 shift 同时又按下 A 键
var textbox = document.getElementById("myTextbox");

// 以DOM3级方式创建事件对象, 其它浏览器返回非标准 KeyboardEvent 对象
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);

通用事件可以这样写

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

// 创建事件对象
var event = document.createEvent("Events");

// 初始化事件对象
event.initEvent(type, bubbles, cancelable);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = 65;
event.charCode = 65;

// 触发事件
textbox.dispatchEvent(event);

DOM3级还定义了“自定义事件”，这不是由DOM原生触发的，目的是让开发人员创建自己的事件。调用 createEvent("CustomEvent")，返回一个名为 initCustomEvent() 的方法，接收如下4个参数

• type: string，触发的事件类型，例如"keydown"
• bubbles: bool，表示事件是否应该冒泡
• cancelable: bool，表示事件是否可以取消
• detail: any，保存在 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);
}

这个例子创建了一个冒泡事件 myevent，event.detail的值被设置成一个简单的字符串，然后在

元素和document上侦听这个事件，因为 initCustomEvent() 方法已经指定这个事件应该冒泡，所以浏览器会负责将事件向上冒泡到document