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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
老生常谈的跨域处理
Jan 11 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python3实现windows下同名进程监控
2018/06/21 Python
浅谈python标准库--functools.partial
2019/03/13 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
小学生防溺水广播稿
2014/01/12 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
专业技术职务聘任书
2014/03/29 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
趣味运动会简讯
2015/07/20 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript