JavaScript模拟事件的注意要点

时间: 2019-04-16阅读: 173标签: 事件

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");
}
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
//触发事件
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);

1

vue的事件冒泡

先说冒泡,我们都知道水中有气泡的时候,气泡会从水底往上升,由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events [,eventData], handler);.on(events [,selector] [,data], handler)

原生js实现trigger方法

事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?

NodeJS事件

触发器Emitter会触发命名事件eventName来调用函数Listener,移除指定事件的指定监听器:emitter.removeListener(eName, listener)、emitter.off(eName,listener) 设置监听器最大绑定值:emitter.setMaxListeners(n)

JavaScript 事件

客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象,不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

jQuery on()方法使用

本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下:此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

Selenium WebDriver 中鼠标和键盘事件分析及扩展

在使用 Selenium WebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为。比如使用鼠标单击、双击、右击、拖拽等动作;或者键盘输入、快捷键使用、组合键使用等模拟键盘的操作

Js中的事件委托/事件代理

什么叫事件委托/事件代理呢 ?JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

JavaScript 事件冒泡和捕获模式

捕获模式1,addEventListener 的第三个参数 useCapture 为 true 则为捕获模式2,点击 C 时事件触发顺序为 A -> B -> C

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全