手动模拟触发input框事件

由于页面上加载了对应的JavaScript代码，监听着input框，包括但不限于：修改、删除、失去焦点等等，导致通过控制台修改input框的值，无法被原页面所监听，最终无法通过表单验证实现想要的效果，所以需要通过手动添加对应的事件来实现效果
 

 var  invent = new InputEvent(type,eventInitDict)

1. type: 事件类型，必需。可以是 'input'、'change' 等合法的事件类型。
2. eventInitDict: 一个可选的参数对象，用于设置事件的属性。
   • bubbles: 布尔值，表示事件是否可以冒泡，默认为 false。如果设置为 true，则事件会向上传递到父元素。
   • cancelable: 布尔值，表示事件是否可以被取消，默认为 false。如果设置为 true，则可以通过调用 event.preventDefault() 来取消事件的默认行为。
   • composed: 布尔值，表示事件是否可以穿越 Shadow DOM 边界，默认为 false。如果设置为 true，则事件可以从 Shadow DOM 中的元素传递到外部文档。
   • data: 字符串，表示输入的数据。可以是用户输入的文本或其他类型的数据。
   • inputType: 字符串，表示输入的类型，比如 'insertText'、'deleteContentBackward' 等。用于指示输入的操作类型。
   • isComposing: 布尔值，表示是否正在进行输入组合，默认为 false。如果设置为 true，则表示用户正在进行输入组合，例如输入中文时的拼音输入。
   • targetRanges: 一个 Range 对象数组，表示输入的目标范围。用于指定输入操作的目标文本范围

常用的事件类型

1. click：当用户点击元素时触发。常用于处理点击事件的逻辑。
2. mouseout：当鼠标指针移出元素时触发。常用于处理鼠标离开事件的逻辑。
3. keydown：当用户按下键盘上的任意键时触发。常用于处理键盘按键事件的逻辑。
4. keyup：当用户释放键盘上的任意键时触发。常用于处理键盘释放事件的逻辑。
5. input：当元素的值发生变化时触发。常用于处理输入框内容变化事件的逻辑。
6. change：当元素的值发生变化并且失去焦点时触发。常用于处理表单元素值变化事件的逻辑。
7. focus：当元素获得焦点时触发。常用于处理元素获得焦点事件的逻辑。
8. blur：当元素失去焦点时触发。常用于处理元素失去焦点事件的逻辑。

常见用法

var data_id = "bd3da87c"
var inputEvent = new Event('input', { bubbles: true });
var input = document.querySelector(`input[data-v-${data_id}=""]`);
input.dispatchEvent(inputEvent);

对于textarea 可能上面的方法不适合用，需要用下面的方法

event.initEvent('input', false, true); 初始化了事件对象，设置了以下参数：

1. 'input'：事件类型，表示要创建的事件类型为 'input'。可以是任何合法的事件类型，比如 'click'、'keydown' 等。
2. false：表示事件是否可以冒泡，默认为 false。如果设置为 true，则事件可以冒泡到父元素。
3. true：表示事件是否可以被取消，默认为 true。如果设置为 false，则无法通过调用 event.preventDefault() 来取消事件的默认行为。

const event = document.createEvent('HTMLEvents');
event.initEvent('input', false, true);

var textarea = document.querySelector(`textarea[data-v-${data_id}=""]`);
textarea.dispatchEvent(event);