如何手动触发onchange事件？ [英] How can I trigger an onchange event manually?

问题描述

我通过日历窗口小部件设置日期时间文本框值。显然，日历窗口小部件会这样做：

  document.getElementById（'datetimetext'）。value = date_value; 
  

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

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

任何想法？

解决方案

有几种方法可以做到这一点。如果 onchange 监听器是一个通过 element.onchange 属性设置的函数，而您不会对事件对象感到烦恼或冒泡/传播，最简单的方法是调用该函数：

  element.onchange（）; 
  

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

  if（createEvent在文档中）{
 var evt = document.createEvent（HTMLEvents）; 
 evt.initEvent（change，false，true）; 
 element.dispatchEvent（evt）; 
} 
 else 
 element.fireEvent（onchange）; 
  

I'm setting a date-time textfield value via a calendar widget. Obviously, the calendar widget does something like this :

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

What I want is : On changing value in the date-time textfield I need to reset some other fields in the page. I've added a onchange event listener to the datetimetext field which is not getting triggered, because I guess onchange gets triggered only when the element gets focus & its value is changed on losing focus.

Hence I'm looking for a way to manually trigger this onchange event (which I guess should take care of checking the value difference in the text field).

Any ideas ?

解决方案

There's a couple of ways you can do this. If the onchange listener is a function set via the element.onchange property and you're not bothered about the event object or bubbling/propagation, the easiest method is to just call that function:

element.onchange();

If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener/attachEvent, you need to do a bit of feature detection to correctly fire the event:

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

这篇关于如何手动触发onchange事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！