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

背景

前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如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事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-06-08

JS DOMReady事件的六种实现方法总结

在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等. 原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片.脚本.样式表甚至是iframe中所有资源的下载后才触发的. 这对于很多实际的应用而言有点太"迟"了,比较影响用户体验. 为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成

JavaScript DOM事件(笔记)

第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件处理程序 2-1 HTML事件处理程序 //缺点:HTML和JS代码紧密的耦合在一起; <input type="button" value="按钮" onclick="showMessage()"&g

JavaScript DOM 添加事件

因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件! 而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式!这样我们就可以直接调用addEvent()方法来给对象添加事件了! 这不是更方便?!呵呵-- 让我们来看看吧! /** * 注册一个监听事件到元素 * @param {Object} node 所要添加事件的对象 * @param {Object} type

javascript 删除dom对象的事件函数代码

JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

DOM3中的js textInput文本事件

与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即触发(如CapsLock,Backspace). 可看到textInput考虑的主要是字符,可以通过事件对象的data属性获取所输入字符. 示例 DOM3 event textInput function addEvent(el,type,fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.att

JS中dom0级事件和dom2级事件的区别介绍

dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

先来看看现象: 复制代码 代码如下: <html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px&q

JS实现动态添加DOM节点和事件的方法示例

本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

关于javascript DOM事件模型的两件事

事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)

本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

谈谈我对JavaScript DOM事件的理解

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

javascript 传统事件模型构造的事件监听器实现代码

代码如下: 复制代码 代码如下: var br={}; br.eventRouter = {}; br.eventRouter.addListen = function(el,eventType,func){ if(!el.eventObjs){ el.eventObjs = {}; } if(!el.eventObjs[eventType]){ el.eventObjs[eventType]=[]; br.eventRouter.bindListen(el,eventType); } el.e

讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

第一件事情. this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象. 如果是事件绑定函数,则指向被绑定的元素本身. <script type="text/javascript"> //by Go_Rush(阿舜) from  http://ashun.cnblogs.com/ alert(this===window)  //true  直 接调用的时候,指向window本身 var gorush={     f:funct

关于JavaScript数组你所不知道的3件事

在编程语言当中,数组(Array)是一个非常常用的功能:它是一种特殊的变量,可以用来同时储存多个数值.然而,在JavaScript方面,数组的功能还有很多其他值得探索的地方. 在这篇文章中,我们将会讨论JavaScript数组的三个并不那么常见的功能. 1. 给数组添加自定义属性 在网上搜寻有关JavaScript数组的定义时,你会发现几乎所有人对于数组的定义都一样:一种对象. 事实上,我们用JavaScript处理的所有东西,都可以视为是一种对象.JavaScript中有两种数据类型,基本类型

Javascript基础知识(一)核心基础语法与事件模型

一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

Javascript Event事件中IE与标准DOM的比较

1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流) DOM事件模型: body-&g

javascript事件模型代码

本节稍稍深入地讨论关于事件处理的话题,如果你对模式.闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获. 1 事件处理模式 在程序设计领域,"事件处理"是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变通知给这个对象或者相关联的某个对象,让它执行对应的动作,这就是事件处理的基本原理.负责通知状态改变的对象被称作"消息",而执行响应动作的属性则被称作"事件代理".