可拖拽的select组件

前言

不知道大家有没有遇到过通过函数修改了input中的值，但是没法触发blur事件的尴尬情况，最近公司有一个外置应用程序，通过热键触发，将选中的文字，按照前端设置好的顺序依次修改input的值，但是这样是没法触发input的事件的，而我通过查阅资料，发现了这个熟悉又陌生的属性:dispatchEvent，这个之前在学习的时候也有接触过，但是一直没有用到，今天就刚好可以使用到这个属性。

dispatchEvent简单用法

触发某个input的blur事件

// 获取 input 元素
const inputElement = document.getElementById('myInput');

// 创建 blur 事件
const blurEvent = new Event('blur', { bubbles: true });

// 调度 blur 事件
inputElement.dispatchEvent(blurEvent);

触发某个input的input事件

// 获取 input 元素
const inputElement = document.getElementById('myInput');

// 创建 input 事件
const inputEvent = new Event('input', { bubbles: true });

// 调度 input 事件
inputElement.dispatchEvent(inputEvent);

以此类推，各种事件都可以触发

我遇到的问题

在我的项目中，我需要先将值录入，再触发blur事件，这个在普通input中是好使的，但是我在使用tdesign组件时，发现blur的时候，值还没有进去
我当时的代码是

// 获取 input 元素
const inputElement = document.getElementById('myInput');

// 创建 input 事件
const inputEvent = new Event('input', { bubbles: true });

// 调度 input 事件
inputElement.dispatchEvent(inputEvent);

// 创建 blur 事件
const blurEvent = new Event('blur', { bubbles: true });

// 调度 blur 事件
inputElement.dispatchEvent(blurEvent);

其实这种也很好解决，加个延时器就好了

setTimeout(() => {
  // 创建 blur 事件
  const blurEvent = new Event('blur', { bubbles: true });

  // 调度 blur 事件
  inputElement.dispatchEvent(blurEvent);
}, 500);

好了，本篇文章就简单介绍到这里，希望对大家有所帮助，谢谢大家的阅读