详解用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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在Django框架中运行Python应用全攻略
2015/07/17 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python3使用GUI统计代码量
2019/09/18 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
应届生法律求职信
2013/10/22 职场文书
行政部主管岗位职责
2013/12/28 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
教师党员个人总结
2015/02/10 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
爱心捐款活动总结
2015/05/09 职场文书
教师节班会主持词
2015/07/06 职场文书
解决 redis 无法远程连接
2022/05/15 Redis