如何手动触发 onchange 事件?

IT技术 javascript javascript-events event-handling
2021-01-30 04:23:40

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

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

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

因此,我正在寻找一种手动触发此onchange事件的方法(我想这应该负责检查文本字段中的值差异)。

有任何想法吗 ?

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");
这就是“老方法”。现在还有另一种方式见米兰回答。
2021-03-27 04:23:40
谢谢。似乎正在使用else块中的那 3 行在 Android 的 WebView 中工作
2021-03-30 04:23:40
Andy E,这在 IE10 中不起作用,有什么想法吗?
2021-04-05 04:23:40
谢谢。这有效,但我不确定这里的浏览器检测。想知道是否有办法通过 YUI 库来做同样的事情。不管怎么说,多谢拉。
2021-04-09 04:23:40
@NickBinnet:有趣。我目前在 Linux 中工作,无法切换到测试解决方案,但我建议交换ifelse块,并进行测试if ('createEvent' in document)让我知道这是否有效,我会更新答案。
2021-04-09 04:23:40

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);
@BrettZamir 通过以下方式为我工作(至少在 Chrome 36 中): document.querySelector('select.freight').dispatchEvent(new Event('change', { 'bubbles': true }))
2021-03-25 04:23:40
仅供参考... MDN 确实提到了这一点,但它不受 IE10+ 支持(可以说现代一词的定义也是现代的..)并且仅在 Safari 的夜间(截至撰写本文时)IE10+ 确实有此构造函数方法但您需要指定事件的类型,例如。鼠标事件或键盘事件:请参阅:- msdn.microsoft.com/en-us/library/ie/dn905219%28v=vs.85%29.aspx
2021-03-27 04:23:40
这是new CustomEvent('change')现在(六月2020 / Covid-19)。
2021-04-01 04:23:40
这不适用于 IE11
2021-04-02 04:23:40
element.dispatchEvent(new window.Event('change', { bubbles: true })) 如果你也想泡
2021-04-02 04:23:40