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

dom中的事件模拟

三个步骤：

首先通过document.createevent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串：

1. uievents（dom3中的uievent）鼠标和键盘事件；
2. mouseevents（dom3中的mouseevent）鼠标事件；
3. mutationevents（dom3中的mutationevent）变动事件；
4. htmlevents（没有dom3中对应的事件）html事件；

其次在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。

最后就是触发事件。这需要使用dispatchevent()方法，接收一个参数，即表示要触发的event对象。

模拟鼠标事件

首先创建鼠标事件对象的方法createevent()传入mouseevents，返回的对象的方法initmouseevent()，接收15个信息：

1. type（字符串）：事件类型如“click”；
2. bubble（布尔值）：是否冒泡；
3. cancelable（布尔值）：是否可取消；
4. view（abstractview）：与事件关联的视图，一般为document.defaultview；
5. detail（整数）：一般为0，一般只有事件处理程序使用；
6. screenx（整数）：事件相对于屏幕的x坐标；
7. screeny（整数）；
8. clientx（整数）：事件相对于视口的x坐标；
9. clienty（整数）；
10. ctrlkey（布尔值）：是否按下了ctrl键，默认为false；
11. altkey（布尔值）；
12. shiftkey（布尔值）；
13. metakey（布尔值）；
14. button（整数）：表示按下了哪个鼠标键，默认为0；
15. 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");
}
//触发事件
btn.dispatchevent(event); //hello
//取消引用
btn.onclick = null;

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

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

模拟键盘事件

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

1. type（字符串）：要触发的事件类型，“keydown”等；
2. bubbles（布尔值）：表示事件是否应该冒泡；
3. cancelable（布尔值）：是否可以取消；
4. view（abstractview）：与事件关联的视图。一般为document.defaultview；
5. key（布尔值）：表示按下的键的键码；
6. location（整数）：表示按下哪里的键。0为主键盘；1为左；2为右；3为数字键盘；4为虚拟键盘；5为手柄；
7. modifiers（字符串）：空格分隔的修改键列表，如“shift”；
8. 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()方法，接收参数：

1. type；
2. bubbles；
3. cancelable；
4. view；
5. ctrlkey；
6. altkey；
7. shiftkey；
8. metakey；
9. keycode；
10. 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);

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接