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 window.event对象详尽解析
Feb 17 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
使用zrender.js绘制体温单效果
Oct 31 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php中smarty区域循环的方法
2015/06/11 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
大学毕业后的十年规划
2014/01/07 职场文书
高二物理教学反思
2014/02/08 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
关于青春的演讲稿
2014/05/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
python实现网络五子棋
2021/04/11 Python