原生JS修改输入框value，并触发前端框架改变内部管理的响应式数据-526互联

背景

有时候，我们需要在一个网站上重复地执行某些操作，例如：输入>查询>输入>查询······这时候，我们可以写一个 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);
}