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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JS模板实现方法
Apr 03 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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数据文件缓存类汇总
2014/12/05 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue兄弟组件传递数据的实例
2018/09/06 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
鱼油专家:Omegavia
2016/10/10 全球购物
促销活动方案模板
2014/02/24 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
初婚初育证明范本
2015/06/18 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android