JavaScript中的模拟事件和自定义事件实例分析
本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考，具体如下：
前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。
下面介绍JavaScript中的模拟事件和自定义事件。
1、DOM中的事件模拟
1)DOM中的事件模拟有以下3个步骤：
步骤1：创建事件对象event
可以在document对象上使用createEvent()方法创建event对象，此方法接收一个参数，即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式，而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一：
①UIEvents：一般化的UI事件，鼠标事件和键盘事件都继承自UI事件，DOM3级中是UIEvent；
②MouseEvents：一般化的鼠标事件，DOM3级中是MouseEvent；
③MutationEvents：一般化的DOM变动事件，DOM3级中是MutationEvent；
④HTMLEvents：一般化的HTML事件，没有对应的DOM3级事件，被分散到其他类别中。
步骤2：初始化事件对象
使用与事件有关的信息对其进行初始化，每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象，不同类型的方法的名字也不相同，具体要取决于createEvent()中使用的参数。
步骤3：触发事件
使用dispatch()方法，此方法接收一个参数，即要触发事件的event对象。
2)模拟鼠标事件：
使用createEvent()方法创建event对象，传入字符串"MouseEvents"，返回的对象有一个名为initMouseEvent()方法，用于指定与该鼠标事件有关的信息。
模拟按钮的单击事件：
varbtn=document.getElementsByTagNames("button")[0];
varevent=document.createEvent("MouseEvents");
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,0,null);
btn.dispatchEvent(event);
3)模拟键盘事件：
使用createEvent()方法创建event对象，传入字符串"KeyboardEvent"，返回的对象有一个名为initKeyboardEvent()方法。
DOM2级事件并没有专门规定键盘事件，后来的DOM3级事件才正式将其作为一种事件给出规定。IE9是目前唯一支持DOM3级键盘事件的浏览器，但其他浏览器也可以模拟键盘事件。
在使用createEvent()方法之前，需要先检测浏览器是否支持DOM3级事件。
模拟按住Shift的同时又按下A键：
vartext=document.getElementsByTagNames("input")[0];
if(document.implementation.hasFeature("KeyboardEvents",3.0){
varevent=document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
}
text.dispatchEvent(event);
4)模拟其他事件：
①模拟变动事件：
使用createEvent()方法创建event对象，传入字符串"MutationEvents"，返回的对象有一个名为initMutationEvent()的方法。
varevent=document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted",true,false,someNode,"","","",0);
target.dispatchEvent(event);
②模拟HTML事件：
使用createEvent()方法创建event对象，传入字符串"HTMLEvents"，返回的对象有一个名为initMutationEvent()的方法。
varevent=document.createEvent("HTMLEvents");
event.initEvent("focus",true,false);
target.dispatchEvent(event);
5)自定义DOM事件：
DOM3级还定义了自定义事件。自定义事件不是由DOM原生触发的，目的是让开发人员创建自己的事件。
创建自定义事件，可以使用createEvent("CustomEvent")方法，返回的对象有一个名为initCustomEvent()的方法，接收如下4个参数：
type（字符串）：事件类型；
bubbles（布尔值）：时间是否应该冒泡；
cancelable（布尔值）：表示事件是否可以取消；
detail（对象）：任意值，保存在event对象的detail属性中。
vardiv=document.getElementsByTagNames("div")[0];
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){
varevent=document.createEvent("CustomEvent");
event.initCustomEvent("myEvent",true,false,"Helloworld");
}
div.dispatchEvent(event);
单击div会输出：
div：Helloworld
document：Helloworld
单击document会输出：
document：Helloworld
2、IE中的事件模拟
IE中的事件模拟有以下3个步骤：
①使用document.createEventObject()方法在IE中创建event对象，与DOM不同的是，此方法不接受参数，结果会返回一个通用的event对象。
②为event对象手动添加所有必要的信息，没有方法来辅助添加。
③在目标上使用fireEvent()方法，此方法接收两个参数：事件处理程序的名称和event对象。在调用fireEvent()方法时，会自动为event对象添加srcElement和type属性，其他属性则必须手动添加。
在IE中，模拟任何事件都采用相同的模式。
模拟click事件：
varbtn=document.getElementsByTagNames("button")[0];
varevent=document.createEventObject();
event.screenX=100;
event.screenY=0;
event.clientX=0;
event.clientY=0;
event.strlKey=false;
event.altKey=false;
event.shiftKey=false;
Event.button=0;
btn.fireEvent("onclick",event);
模拟keypress事件：
vartext=document.getElementsByTagNames("input")[0];
varevent=document.createEventObject();
event.strlKey=false;
event.altKey=false;
event.shiftKey=false;
Event.keyCode=65;
btn.fireEvent("onkeypress",event);
PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。