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 相关文章推荐
用于table内容排序
Jul 21 Javascript
(function(){})()的用法与优点
Mar 11 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JavaScript实现轮播图特效
Apr 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 Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php画图实例
2014/11/05 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
动态加载js的几种方法
2006/10/23 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
简单谈谈python中的语句和语法
2017/08/10 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python suds访问webservice服务实现
2020/06/26 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
乔迁之喜主持词
2014/03/27 职场文书
优秀会计求职信
2014/07/04 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
心理健康教育主题班会
2015/08/13 职场文书
小学副班长竞选稿
2015/11/21 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android