详解用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事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript DOM事件(笔记)

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

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

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

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

  • 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(

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

    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/

  • 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

  • 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

  • JavaScript DOM 添加事件

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

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

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

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

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

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

    背景 前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件.通常一些元素上会自带一些触发事件的方法,例如click.focus等,但是如果是其他的事件,例如mousedown.mouseup.mouseenter,这些事件怎么模拟呢? 思路 其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • 详解node.js 事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. 事件驱动程序 Node.js 使用事件驱动模型,当web server接收到请

  • JS代码触发事件代码实例

    这篇文章主要介绍了js代码触发事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 /*** * 需要触发谁的点击事件 * @param how_id 节点的id 如:<input id='test'/> 则how_id=test * @param how_this 这个要触发事件的节点 how_this = $("test"); * @returns */ function howChange(how_id,how

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • AngularJs bootstrap详解及示例代码

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu

  • 详解Node.JS模块 process

    process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API.从文档出发,管中窥豹,进一步认识和学习 process 模块: 如何处理命令参数? 如何处理工作目录? 如何处理异常? 如何处理进程退出? process 的标准流对象 深入理解 process.nextTick 如何处理命令参数? 命令行参数指的是 2 个方面: 传给 node 的参数.例如 node --harmony script.js --version 中,--harmony 就是

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • java多线程编程技术详解和实例代码

     java多线程编程技术详解和实例代码 1.   Java和他的API都可以使用并发. 可以指定程序包含不同的执行线程,每个线程都具有自己的方法调用堆栈和程序计数器,使得线程在与其他线程并发地执行能够共享程序范围内的资源,比如共享内存,这种能力被称为多线程编程(multithreading),在核心的C和C++语言中并不具备这种能力,尽管他们影响了JAVA的设计. 2.   线程的生命周期 新线程的生命周期从"新生"状态开始.程序启动线程前,线程一直是"新生"状态:

随机推荐