如何手动触发onchange事件？

Question

我正在通过日历小部件设置日期时间文本字段值.显然,日历小部件的功能如下:

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

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

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

有任何想法吗 ？

Answer 1

有几种方法可以做到这一点.如果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");

Answer 2

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);

Answer 3

对于那些使用jQuery的人来说,有一个方便的方法:http://api.jquery.com/change/