如何手动触发更改事件？

javascript event-handling dom-events

2022-08-29 23:02:22

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

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

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

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

有什么想法吗？

答案 1

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

element.onchange();

如果需要它来完整模拟真实事件，或者通过 HTML 属性或 / 设置事件，则需要执行一些功能检测以正确触发事件：addEventListenerattachEvent

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

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