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;
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(),吸收下面参数:
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);