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 相关文章推荐
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
javascript常用经典算法详解
Jan 11 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
paypal即时到账php实现代码
2010/11/28 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
简单的js计算器实现
2016/10/26 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python如何给你的程序做性能测试
2020/07/29 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
争论的故事教学反思
2014/02/06 职场文书
有关爱国演讲稿
2014/05/07 职场文书
珍惜资源的建议书
2014/08/26 职场文书
期中考试复习计划
2015/01/19 职场文书
军训个人总结
2015/03/03 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
公司新员工欢迎词
2015/09/30 职场文书
七个Python必备的GUI库
2021/04/27 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL