通过脚本修改input值，手动触发input事件

如果通过脚本修改表单元素的值时 input 事件并不会自动触发，这是因为直接修改元素的值（如通过 JavaScript 的 element.value = 'new value'）并不会自然地引发 input 事件。为了确保在这种情况下也能触发 input 事件，你需要手动触发它。可以通过以下方式手动触发 input 事件：

element.value = 'new value';
// 手动触发 input 事件
const event = new Event('input', { bubbles: true });
element.dispatchEvent(event);
复制

这段代码首先修改了表单元素（element）的值，然后创建了一个新的 Event 对象，并将其类型设置为 'input'，通过 dispatchEvent 方法手动在该元素上触发这个事件。这样，即使值是通过脚本修改的，所有监听该 input 事件的处理函数也会被执行，提供了一致的响应体验。

参数 { bubbles: true } 是一个选项对象，用来定义事件的一些特性。具体来说：

• bubbles: true 表示这个事件会在 DOM 树上向上冒泡。事件冒泡是指事件从最深的节点（事件的目标节点）开始，然后逐级向上层节点传播事件。这是 DOM 事件流的一种机制，允许事件不仅在目标元素上触发，还能在它的所有祖先元素上触发，直到文档根节点。这对于模拟用户交互非常有用，因为在现实场景中，用户操作（如点击）通常会引起一系列的事件响应。

除了 bubbles，Event 构造函数还可以接受其他几个可选参数来定制事件的行为，主要包括：

• cancelable: 布尔值，表示事件是否可以被取消。默认为 false。如果设为 true，事件可以被 Event.preventDefault() 方法取消，阻止其默认行为。

• composed: 布尔值，用于 Shadow DOM 中，决定事件是否应该穿过 Shadow DOM 的边界向外传播。默认为 false。

例如，如果你想创建一个可取消且能冒泡的自定义事件，可以这样写：

const customEvent = new Event('myCustomEvent', { bubbles: true, cancelable: true });
复制

不过，不同的事件类型可能对这些选项的处理方式有所不同，特别是对于一些特定的 UI 事件，它们可能有自己额外的特性和选项。在使用时，最好查阅相关事件类型的文档，了解其默认行为和可用选项。