JavaScript"模拟事件"的注意要点详解
DOM中的事件模拟
三个步骤：
首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串：
- UIEvents（DOM3中的UIEvent）鼠标和键盘事件；
- MouseEvents（DOM3中的MouseEvent）鼠标事件；
- MutationEvents（DOM3中的MutationEvent）变动事件；
- HTMLEvents（没有DOM3中对应的事件）HTML事件；
其次在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。
最后就是触发事件。这需要使用dispatchEvent()方法，接收一个参数，即表示要触发的event对象。
模拟鼠标事件
首先创建鼠标事件对象的方法createEvent()传入MouseEvents，返回的对象的方法initMouseEvent()，接收15个信息：
- type（字符串）：事件类型如“click”；
- bubble（布尔值）：是否冒泡；
- cancelable（布尔值）：是否可取消；
- view（AbstractView）：与事件关联的视图，一般为document.defaultView；
- detail（整数）：一般为0，一般只有事件处理程序使用；
- screenX（整数）：事件相对于屏幕的X坐标；
- screenY（整数）；
- clientX（整数）：事件相对于视口的X坐标；
- clientY（整数）；
- ctrlKey（布尔值）：是否按下了Ctrl键，默认为false；
- altKey（布尔值）；
- shiftKey（布尔值）；
- metaKey（布尔值）；
- button（整数）：表示按下了哪个鼠标键，默认为0；
- relatedTarget（对象）：表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。
最后记得把event对象传给dispatchEvent()方法。
如模拟按钮的单击事件：
//模拟click事件
//获取btn
varbtn=document.querySelector("#btn");
//创建event
varevent=document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick=function(){
console.log("hello");
}
//触发事件
btn.dispatchEvent(event);//hello
//取消引用
btn.onclick=null;
另外，建议使用构造函数"MouseEvent"：
varevt=newMouseEvent("click",{
bubbles:true,
cancelable:true,
view:window
});
模拟键盘事件
首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents，返回的对象的方法initKeyEvent()，接收下面参数：
- type（字符串）：要触发的事件类型，“keydown”等；
- bubbles（布尔值）：表示事件是否应该冒泡；
- cancelable（布尔值）：是否可以取消；
- view（AbstractView）：与事件关联的视图。一般为document.defaultView；
- key（布尔值）：表示按下的键的键码；
- location（整数）：表示按下哪里的键。0为主键盘；1为左；2为右；3为数字键盘；4为虚拟键盘；5为手柄；
- modifiers（字符串）：空格分隔的修改键列表，如“shift”；
- repeat（整数）：在一行中按下了多少次这个键；
由于DOM3级不提倡使用keypress事件，因此只能利用这种技术来模拟keydown和keyup事件：
vartextbox=document.querySelector("#myTextBox");
varevent=document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
textbox.dispatchEvent(event);
在Firefox中，调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件，返回的事件对象会包含一个initKeyEvent()方法，接收参数：
- type；
- bubbles；
- cancelable；
- view；
- ctrlKey；
- altKey；
- shiftKey；
- metaKey；
- keyCode；
- charCode；
另外，建议使用构造函数“KeyboardEvent”
模拟其他事件
浏览器中很少使用变动事件和HTML事件；要模拟变动事件，可以用createEvent("MutationEvent");initMutationEvent();要模拟HTML事件，可以用createEvent("HTMLEvents");initEvent();
自定义DOM事件
用createEvent("CustomEvent");initCustomEvent()方法，接收参数：type；bubbles；cancelable；detail；
varbtn=document.querySelector("#btn");
varevt=document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hellothere");
btn.onclick=function(){
console.log(event.detail);
};
btn.dispatchEvent(evt);
IE中的事件模拟
调用document.createEventObject()方法，创建event对象，并指定必要的信息，最后在目标上调用fireEvent()方法，接收两个参数：事件处理程序名称和event对象：
varbtn=document.querySelector("#btn");
varevt=document.createEventObject();
evt.screenX=0;
evt.screenY=0;
evt.clientX=0;
evt.clientY=0;
evt.ctrlKey=false;
evt.altKey=false;
evt.shiftKey=false;
evt.button=0;
btn.fireEvent("onclick",evt);
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。如果你想了解更多相关内容请查看下面相关链接