背景
有时候，我们需要在一个网站上重复地执行某些操作，例如：输入>查询>输入>查询······这时候，我们可以写一个 js 自动化脚本执行这些操作，来保护我们的手指关节，以及键盘鼠标。
对于大多数网站来说，使用web框架如vue进行开发，这些框架使用内部的响应式系统来管理数据，针对input元素，vue的做法是监听它的change事件，因此直接修改输入框的value值是无效的。
我们可以模拟输入事件，并触发它，确保框架内部的响应式系统能修改数据。
接下来通过简单的代码说明如何模拟事件。
模拟事件
简单代码示例：
//仅为示例，实际上是一个包含要查询的数据的巨长的数据
let array = ['7888','89998','9908890'];
//拿到输入框的dom
let input = document.querySelector("input")
//模拟输入事件
let inputEvent = new Event('input', { bubbles: true });
//拿到按钮的dom
let search = document.querySelector(".search")
//模拟点击事件
const clickEvent = new Event('click', { bubbles: true });
//开始循环
for(let i=0;i<array.length;i++){
//修改输入框的值
input.value=array[i]
//触发输入事件
input.dispatchEvent(inputEvent);
//触发点击事件
search.dispatchEvent(clickEvent);
}
在线演示
小结
- 在触发完输入事件后，可以根据实际情况，加一点延时，再触发点击事件。
- 事件的冒泡设置为true，确保能触发框架的响应。