如何手动触发 onchange 事件？ [复制]

Posted 2023-02-19

【中文标题】如何手动触发 onchange 事件？ [复制]

【英文标题】：How can I trigger an onchange event manually? [duplicate]

【发布时间】：2011-02-20 20:10:24

【问题描述】：

我正在通过日历小部件设置日期时间文本字段值。显然，日历小部件会做这样的事情：

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

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

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

有什么想法吗？

【问题讨论】：

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

$().change();

第二个需要jquery

【参考方案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);

【讨论】：

@BrettZamir 通过以下方式为我工作（至少在 Chrome 36 中）：document.querySelector('select.freight').dispatchEvent(new Event('change', 'bubbles': true ))

仅供参考... MDN 确实提到了这一点，但 IE10+ 不支持它（可以说现代这个词的定义也是现代的..）并且仅在 Safari 的夜间（截至写作）IE10+确实有这个构造方法，但你需要指定事件的类型，例如。 MouseEvent 或 KeyboardEvent :see:- msdn.microsoft.com/en-us/library/ie/dn905219%28v=vs.85%29.aspx

这在 IE11 上不起作用

element.dispatchEvent(new window.Event('change', bubbles: true )) 如果你也想冒泡的话

现在是new CustomEvent('change')（2020 年 6 月/Covid-19）。

【参考方案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");

【讨论】：

谢谢。这可行，但不确定此处的浏览器检测。想知道是否有办法通过 YUI 库来做同样的事情。无论如何，谢谢。

谢谢。似乎正在使用来自else 块的那 3 行在 android 的 WebView 中工作。

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

@NickBinnet：很有趣。我目前在 Linux 中工作，无法切换到测试解决方案，但我建议交换 if 和 else 块，并改为测试 if ('createEvent' in document)。让我知道这是否有效，我会更新答案。

这是“老式方式”。现在有another way。见米兰回答。