我如何手动触发onchange事件？

Question

我正在通过日历小部件设置日期时间文本字段的值。显然，日历小部件会执行以下操作：

document.getElementById('datetimetext').value = date_value;

我想要的是：
当更改日期时间文本字段中的值时，我需要重置页面中的一些其他字段。我已经向datetimetext字段添加了onchange事件监听器，但它没有被触发，因为我猜测只有在元素获得焦点并且在失去焦点时更改其值时，onchange才会被触发。

因此，我正在寻找手动触发此事件的方法（我猜应该会检查文本字段中的值差异）。

有什么想法吗？

- CodeTweetie

---

$(document.activeElement).trigger("change"); - TechDog

$(<ELEMENT_SELECTOR>).change(); - Luca C.

第二个需要jQuery。 - Scott

Answer 1

MDN 表示，在现代浏览器中有一种更加简洁的方法来完成这个操作：

// Assuming we're listening for e.g. a 'change' event on `element`

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);

- Milan Iliev

---

@BrettZamir 对我来说可行（至少在Chrome 36中），方法如下：document.querySelector('select.freight').dispatchEvent(new Event('change', { 'bubbles': true })) - SlimShaggy

提供的信息仅供参考，MDN有提到此事，但IE10+（甚至可以说是现代浏览器的定义）不支持该功能；而Safari浏览器只在夜间版本中支持（截至目前为止）。IE10+确实有这个构造方法，但您需要指定事件类型，例如MouseEvent或KeyboardEvent：请参见https://msdn.microsoft.com/zh-cn/library/ie/dn905219(v=vs.85).aspx。 - user2667100

在IE11上无法运行。 - Joel

如果您希望冒泡，可以使用element.dispatchEvent(new window.Event('change', { bubbles: true }))。 - user670839

现在是2020年6月/新冠肺炎时期，使用的是“new CustomEvent('change')”。 - Mike Mestnik

Answer 2

有几种方法可以做到这一点。如果onchange监听器是通过element.onchange属性设置的函数，并且您不关心事件对象或冒泡/传播，最简单的方法就是直接调用该函数：

element.onchange();

如果你需要完全模拟真实事件，或者如果你通过HTML属性或addEventListener/attachEvent设置事件，你需要进行一些特性检测来正确地触发事件：

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");

- Andy E

---

谢谢。使用else块中的这3行代码，似乎在Android的WebView中可以正常工作。 - Kuitsi

Andy E，这在IE10中不起作用，有什么想法吗？ - Nick Binnet

@NickBinnet：有趣。我目前正在Linux上工作，无法切换以测试解决方案，但我建议交换if和else块，并测试是否存在if（'createEvent' in document）。如果这有效，请告诉我，我会更新答案。 - Andy E

Andy，你说得完全正确。它有效。你能否在以下问题的答案中添加一个参考链接？http://stackoverflow.com/questions/17754972/correct-way-to-trigger-change-event-of-cascadingdropdown-using-jquery - Nick Binnet

这是“老派的方法”。现在有另一种方法。请看米兰的回答。 - csr-nontol