JavaScript高级程序设计51.pdf

（续上篇）

模拟鼠标事件

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

模拟键盘事件

“DOM2级事件”草案中本来包含了键盘事件，在定稿之前又删除了，Firefox根据草案实现了键盘事件；“DOM3级事件”与删除的“DOM2级事件”有很大不同

DOM3级规定，调用createEvent()并传入“KeyboardEvent”创建一个键盘事件，返回的对象包含initKeyEvent()方法，接收下列参数

type（字符串）要触发的事件类型，“keydown”

bubbles（布尔值）是否可以冒泡

cancelable（布尔值）是否可以取消

view（AbstractView）与事件关联的视图，几乎总是设置为document.defaultView

key（布尔值）按下的键的键码

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

modifiers（字符串）空格分隔的修改键列表，如“shift”

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

DOM3级不提倡使用keypress事件，只能利用这种技术来模拟keydown和keyup事件

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

　　event;

//DOM3级事件

if(document.implementation.hasFeature("KeyboardEvent","3.0")){

　　　　　　event=document.createEvent("KeyboardEvent");

//初始化对象

　　event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"shift",0);

　　　　}

//触发事件

textbox.dispatchEvent(event);

以上的例子是模拟按住shift的同时按下A键

在Firefox中，调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件，返回的对象包含一个initKeyEvent()方法，接收10个参数

type（字符串）要触发的事件类型，“keydown”

bubbles（布尔值）是否可以冒泡

cancelable（布尔值）是否可以取消

view（AbstractView）与事件关联的视图，几乎总是设置为document.defaultView

ctrlKey（布尔值）是否按下了Ctrl键，默认为false

altKey（布尔值）是否按下了Alt键，默认为false

shiftKey（布尔值）是否按下了Shift键，默认为false

metaKey（布尔值）是否按下了Meta键，默认为false

keyCode（整数）被按下或释放的键的键码，这个参数对keydown和keyup事件有用，默认为0

charCode（整数）通过按键生成的字符的ASCII编码，这个参数对keypress事件有用，默认为0

//只适用于Firefox

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

//创建事件对象

var event=document.createEvent("KeyEvents");

//初始化事件对象

event.initKeyEvent("keypress",true,true,document.defaultView,false,false,false,false,65,65);

//触发事件

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

在此必须使用通用事件，而不能使用UI事件，因为UI事件不允许向event对象添加新的属性

这样的模拟事件虽然会触发键盘事件，但却不会向文本框中写入文本，这是由于无法精确模拟键盘事件造成的

模拟其他事件

模拟变动事件createEvent("MutationEvents"),包含initMutationEvent()方法的变动事件对象，接收type、bubbles、cancelable、relatedNode、preValue、newValue、attrName和attrChange

模拟HTML事件（如“focus”），createEvent("HTMLEvents")，initEvent()初始化

浏览器很少使用变动事件和HTML事件，因为它们会受到一些限制

自定义DOM事件

自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件createEvent("CustomEvent")，返回的对象有一个initCustomEvent()方法，接收4个参数

type(字符串)触发的事件类型

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

　　　　}

支持自定义事件的浏览器有IE9+和Firefox6+

IE中的模拟事件

IE8之前的版本模拟事件与DOM中的思路相似：创建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;

//触发事件（接收事件处理程序的名称和event对象2个参数），fireEvent()方法会自动为event对象添加srcElement和type属性

textbox.fireEvent("onkeypress",event);

与通用事件一样，这个例子触发了事件处理程序却不会在文本框中看到任何字符

-----------------------------------13章事件结束-----------------------------------