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事件//获取btnvar btn = document.querySelector("#btn");//创建eventvar event = document.createEvent("MouseEvents");//初始化eventevent.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"：

var evt = new MouseEvent("click", {  bubbles: true,  cancelable: true,  view: window});

模拟键盘事件

首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents，返回的对象的方法initKeyEvent()，接收下面参数：

type（字符串）：要触发的事件类型，“keydown”等； bubbles（布尔值）：表示事件是否应该冒泡； cancelable（布尔值）：是否可以取消； view（AbstractView）：与事件关联的视图。一般为document.defaultView