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文字滚动停顿效果代码
Jun 28 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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 Token(令牌)设计
2008/03/15 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
简单的项目建议书模板
2014/03/12 职场文书
《恐龙》教学反思
2014/04/27 职场文书
公司总经理任命书
2014/06/05 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
教导主任个人总结
2015/03/03 职场文书