欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-25 18:47:32
dom中的事件模拟 三个步骤: 首先通过document.createevent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串: u...

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);

总结

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