JavaScript"模拟事件"的注意要点
今天小编就为大家分享一篇关于JavaScript"模拟事件"的注意要点详解,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
DOM中的事件模拟
三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:
- UIEvents(DOM3中的UIEvent)鼠标和键盘事件;
- MouseEvents(DOM3中的MouseEvent)鼠标事件;
- MutationEvents(DOM3中的MutationEvent)变动事件;
- HTMLEvents(没有DOM3中对应的事件)HTML事件;
其次在创建了event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。 最后就是触发事件。这需要使用dispatchEvent()方法,接收一个参数,即表示要触发的event对象。
模拟鼠标事件
首先创建鼠标事件对象的方法createEvent()传入MouseEvents,返回的对象的方法initMouseEvent(),接收15个信息:
- type(字符串):事件类型如“click”;
- bubble(布尔值):是否冒泡;
- cancelable(布尔值):是否可取消;
- view(AbstractView):与事件关联的视图,一般为document.defaultView;
- detail(整数):一般为0,一般只有事件处理程序使用;
- screenX(整数):事件相对于屏幕的X坐标;
- screenY(整数);
- clientX(整数):事件相对于视口的X坐标;
- clientY(整数);
- ctrlKey(布尔值):是否按下了Ctrl键,默认为false;
- altKey(布尔值);
- shiftKey(布尔值);
- metaKey(布尔值);
- button(整数):表示按下了哪个鼠标键,默认为0;
- 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"); } //在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 //触发事件 btn.dispatchEvent(event); //hello //取消引用 btn.onclick = null;
另外,建议使用构造函数"MouseEvent":
var evt = new MouseEvent("click", { bubbles: true, cancelable: true, view: window });
模拟键盘事件
首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents,返回的对象的方法initKeyEvent(),接收下面参数: type(字符串):要触发的事件类型,“keydown”等; bubbles(布尔值):表示事件是否应该冒泡; cancelable(布尔值):是否可以取消; view(AbstractView):与事件关联的视图。一般为document.defaultView; key(布尔值):表示按下的键的键码; location(整数):表示按下哪里的键。0为主键盘;1为左;2为右;3为数字键盘;4为虚拟键盘;5为手柄; modifiers(字符串):空格分隔的修改键列表,如“shift”; 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()方法,接收参数:
- type;
- bubbles;
- cancelable;
- view;
- ctrlKey;
- altKey;
- shiftKey;
- metaKey;
- keyCode;
- 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);
结语
感谢您的观看,如有不足之处,欢迎批评指正。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
redis异地多活理论基础之CRDT
随着服务规模的扩大, 为了提升系统的容灾能力以及性能的要求, 会将服务部署在多个地域, 如果服务是有状态的, 比如redis/mysql等, 就需要在多地域之间进行数据同步, 如何保证数据一致性, 就成为了实现"多活"的关键. 以redis为例, 业内已经有redislab和阿里云实现了多活, 并且都是使用的一种叫CRDT的解决方案, 所以, 本文以CRDT的论文为基础, 介绍一下CRDT的理解, 有问题欢迎指正. CRDT: 无冲突复制数据类型 解决多主架构中, 数据复制时的最终一致性问题 使用这类数据结构, 需要满足以下三个条件(比如: INCR命令满足交换律, 结合律, 但是不满足幂等) 交换律: x⊔y=y⊔x 幂等律: x⊔x=x 结合律:(x⊔y)⊔z=x⊔(y⊔z) 分类 基于操作的(CmRT), 比如incr decr等 基于状态的(CvRT), 就是传输的是最终值, 比如restore 数据类型 Op-based counter 解释: 基于操作实现, 每个下游需要同步相同的操作, 查询时直接查询本地即可 说明: 适合类似INCR/DECR等命令, 但是需要确保幂等性...
- 下一篇
什么,你的ThreadLocal内存泄漏了?
微信公众号:IT一刻钟。大型现实非严肃主义现场,一刻钟与你分享优质技术架构与见闻,做一个有剧情的程序员。 关注可第一时间了解更多精彩内容,定期有福利相送哟。 又是一个风和日丽的早上。 这天小美遇到了一个难题。 原来小美在做用户服务鉴权的时候,需要根据每个请求获取token: //获取认证信息 Authentication authentication = tokenProvider.getAuthentication(jwt); //设置认证信息 SecurityContext.setAuthentication(authentication); 然后经过层层的调用,在业务代码里根据认证信息进行权限的判断,也就是鉴权。 小美心里琢磨着,如果每个方法参数中都传递SecurityContext信息,就显的太过冗余,而且看着也丑陋。 那么怎么才能隐式传递参数呢? 这个当然难不倒小美,她决定用ThreadLocal来传递这个变量: class SecurityContextHolder { private static final ThreadLocal<Securit...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- MySQL8.0.19开启GTID主从同步CentOS8
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题