JavaScript"模拟事件"的注意要点

今天小编就为你们分享一篇关于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
var btn = document.querySelector("#btn");
//建立event
var event = 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");
}
//在此我向你们推荐一个前端全栈开发交流圈：619586920  突破技术瓶颈，提高思惟能力
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外，建议使用构造函数"MouseEvent"：

var evt = new MouseEvent("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事件：

var textbox = document.querySelector("#myTextBox");
var event = 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；

var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");
btn.onclick = function () {
  console.log(event.detail);
};
btn.dispatchEvent(evt);

IE中的事件模拟

调用document.createEventObject()方法，建立event对象，并指定必要的信息，最后在目标上调用fireEvent()方法，接收两个参数：事件处理程序名称和event对象：

var btn = document.querySelector("#btn");
var evt = 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);

结语

感谢您的观看，若有不足之处，欢迎批评指正。