详解用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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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中函数内引用全局变量的方法
2008/10/20 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
nodejs教程之入门
2014/11/21 NodeJs
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
利用python画出折线图
2018/07/26 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python add_argument()用法解析
2020/01/29 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
期末自我鉴定
2014/02/02 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
优秀党员获奖感言
2014/02/18 职场文书
同学聚会主持词
2014/03/18 职场文书
施工安全责任书范本
2014/07/24 职场文书
卖房协议书样本
2014/10/30 职场文书
发布会邀请函
2015/01/31 职场文书
学校德育工作总结2015
2015/05/11 职场文书