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


Posted in Javascript onFebruary 13, 2019

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

总结

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

Javascript 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
jQuery 选择器理解
Mar 16 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
js编写选项卡效果
May 23 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
快速了解Node中的Stream流是什么
Feb 13 #Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 #Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 #Javascript
Vue中CSS动画原理的实现
Feb 13 #Javascript
You might like
php获取ajax的headers方法与内容实例
2017/12/27 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
编程语言Python的发展史
2014/09/26 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
Jar包的作用是什么
2014/03/30 面试题
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
合伙经营协议书范本
2014/09/13 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android
python中validators库的使用方法详解
2022/09/23 Python