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"); } //触发事件 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);
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
上一篇: 小米9实验室安兔兔跑分公布:42.8万比高通官方高18%!
下一篇: Python常用模块用法分析
推荐阅读