JavaScript 事宜——“模仿事宜”的注重要点

2019年8月30日 135次阅读 来源: JS菌

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个信息：

  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);
    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004339133
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞