当输入值以编程方式更改时触发更改事件？答案

【问题标题】：Trigger Change event when the Input value changed programmatically?当输入值以编程方式更改时触发更改事件？
【发布时间】：2013-04-27 09:30:39
【问题描述】：

我的表单中有一个输入。

<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>

如果我使用另一个 JavaScript 函数更改此文本框 (changeProgramatic) 中的值，它不会触发更改事件。（注意：我将 'this' 传递给方法）

【问题讨论】：

How to trigger event in JavaScript?的可能重复

标签： javascript jquery html

【解决方案1】：

Vanilla JS 解决方案：

var el = document.getElementById('changeProgramatic');
el.value='New Value'
el.dispatchEvent(new Event('change'));

请注意，dispatchEvent 在旧版 IE 中不起作用（请参阅：caniuse）。 ~~所以你应该只在内部网站上使用它（而不是在有广泛受众的网站上）~~。

因此，从 2019 年开始，您可能只想确保您的客户/观众不使用 Windows XP（是的，有些人在 2019 年仍然使用）。您可能想使用conditional comments 警告客户您不支持旧的 IE（在这种情况下是 IE 11 之前的版本），但请注意，条件 cmets 仅在 IE9 之前有效（在 IE10 中无效）。因此，您可能想改用特征检测。例如。您可以提前检查： typeof document.body.dispatchEvent === 'function'.

【讨论】：

为什么这在 chrome 控制台中不起作用？
@ecoe 不是我能想到的......我想在单步执行（调试）某些其他功能时可能会出现问题。
原来我试图触发 ReactJS 输入组件的事件。 React 事件系统是一个额外的抽象层。
@Sunnyday hm... 对于这个示例脚本，我可以正常工作：jsfiddle.net/eccenux/tg9o7wqy/6。你的意思是一些自定义事件？您是指 Edge-Edge（旧的，内置于 Windows 10）还是 Edge-Edgy（基于 Chromium）？
为我添加了气泡：真的...el.dispatchEvent(new Event('change', { 'bubbles': true }));

【解决方案2】：

您正在使用 jQuery，对吗？将 JavaScript 与 HTML 分开。

您可以使用trigger 或triggerHandler。

var $myInput = $('#changeProgramatic').on('change', ChangeValue);

var anotherFunction = function() {
  $myInput.val('Another value');
  $myInput.trigger('change');
};

【讨论】：

如何使用 jQuery 选择器获取此事件？
我要这个$(document).bind('mycustomevent', function (e, arg1, arg2, arg3) { /* ... */ });
为了他人的利益简化这个答案，基本上只要调用 $(this).trigger('change');在以编程方式更改文本输入值的函数中，其中“this”是文本输入。
注意：这只会触发 Jquery 事件。不是浏览器原生change

【解决方案3】：

如果有人在使用 react，以下内容会很有用：

https://stackoverflow.com/a/62111884/1015678

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));

【讨论】：

这仅对反应有用。其他答案缺少bubbles: true，这就是关键部分。