详解用js代码触发dom事件的实现方案


Posted in Javascript onJune 10, 2020

背景

前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等,但是如果是其他的事件,例如mousedown、mouseup、mouseenter,这些事件怎么模拟呢?

思路

其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规则的(包括事件捕获和可选的冒泡过程),那么这就非常强大了,我们可以基于此做很多事情了。

实现方法

大致流程相信大家都已经想到了,无外乎以下几步操作:

  • 创建要触发的事件实例
  • 获取要触发事件的元素对象
  • 调用元素对象的dispatchEvent方法,参数是目标事件实例
  • 特殊事件要分析一下模拟方式,巧妙的实现

首先,创建事件实例

web标准提供了MouseEvent 接口,专指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:click、dblclick 、mouseup、mousedown。

通过构造函数MouseEvent(typeArg, mouseEventInit),可以生成一个新的MouseEvent对象。该构造函数接受两个参数,第一个参数为typeArg,用于指定事件的名称,一般都是一个字符串。第二个参数为mouseEventInit,可以初始化 MouseEvent的字典,也就是指定一些该事件的属性值,比如鼠标事件常见的screenX、screenY、clientX、clientY等属性,同时,由于MouseEvent是继承于UIEvent,UIEvent又继承于Event,所以mouseEventInit可以包含UIEventInit和EventInit中的属性。

总结一行代码就是:

const mouseEvent = new MouseEvent(typeArg, mouseEventInit);

这里大家看自己实际需要,去指定哪些属性的哪些值即可。

这里再说一句,不仅是鼠标事件,还有很多其他事件,只要浏览器支持,都可以使用的。具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API

这里面列出的事件,理论上都可以自己模拟并触发。

其次,就是在指定元素上触发该事件

有了事件,那么就可以去调用对应元素上的dispatchEvent方法触发了。这里简单,也就是一行代码:

document.getElementById("id").dispatchEvent(mouseEvent);

最后,特殊事件或者场景,分解操作来模拟

有些特殊事件或者场景,其实可以分析一波细节,然后分解成若干个事件连续触发,即可巧妙的实现。
这里举个例子,点击事件,其实本质是:触发一次mousedown,同时在足够短的时间内再触发一次mouseup,那么这样即可间接实现一次click事件。即:

// 一段足够短的时间内
mousedown+mouseup=click

这样,其实在模拟一些特殊操作时,我们也可以实现了。比如,模拟用户的鼠标拖拽多选操作,其本质就是:现在某个元素上触发mousedown事件,然后执行mousemove事件,然后拖拽到某一个元素上时,触发mouseup事件;即:

// 模拟用户拖拽鼠标
(开始元素)mousedown+(截止元素)mouseup=一次鼠标拖拽操作

这里细节可以足够多,看你实际场景按需模拟即可,比如鼠标移动过程中,鼠标进入某个元素时,该元素还会触发mouseenter事件,离开元素还会触发mouseleave事件。那就是:

// 更精确的模拟用户拖拽鼠标
(开始元素)mousedown+(中间元素)mouseenter+(中间元素)mouseleave+(截止元素)mouseup=一次鼠标拖拽操作

总之,细节可以足够多,但是够你模拟出本次操作的基本测试点即可,别忘了,我们的前提是模拟用户操作,进而执行测试用例。

再进一步,你完全可以封装一些常见的用户操作,然后将方法暴露出来,在测试用例中引入,实现高度复用。

总结

总结下来呢,其实就是采用MouseEvent和dispatchEvent两个web标准提供的接口,来通过代码触发事件,进而模拟用户的操作,达到测试用例中,模拟用户行为的目的。希望对你有所帮助。

注意事项

这里有些限制条件,需要大家注意下:

  1. 本文所说的方法,主要是用于自动化测试场景中的,正常开发项目中,不建议大家用这种方式触发事件,这可能会导致你的代码难以理解,影响代码的可维护性。
  2. 本文中主要用到的这两大接口,是有兼容性限制的,IE基本上是无法使用的,但是,一般来讲,使用这种方法的场景多数都是单元测试或者自动化测试的场景,这些场景下一般都会有模拟浏览器环境,而且用的最多的就是chrome的内核,所以基本上在测试场景下,这种方式是可以放心使用的。

到此这篇关于详解用js代码触发dom事件的实现方案的文章就介绍到这了,更多相关js触发dom事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
jquery不常用方法汇总
Jul 26 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
关于使用js算总价的问题
Jun 23 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
详解Vue底部导航栏组件
May 02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 #Javascript
详解vue高级特性
Jun 09 #Javascript
vue实例的选项总结
Jun 09 #Javascript
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
学习php开源项目的源码指南
2014/12/21 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Python编程实现的简单Web服务器示例
2017/06/22 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
中学生旷课检讨书500字
2014/10/29 职场文书
无罪辩护词范文
2015/05/21 职场文书
付款证明格式范文
2015/06/19 职场文书
酒店温馨提示语
2015/07/14 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python Socket编程详解
2021/04/25 Python