详解用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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php cli换行示例
2014/04/22 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
javascript操作数组详解
2014/12/17 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
Vue实现日历小插件
2019/06/26 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python+Django+apache的配置方法详解
2016/06/01 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python中doctest库实例用法
2020/12/31 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
土木工程毕业生自荐信
2013/11/12 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
学生保证书范文
2014/04/28 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
大学毕业生自我评价
2015/03/02 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
董事长致辞
2015/07/29 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js