JavaScript手动触发.onchange()事件

Question

我有一个输入框，我想要给它赋一个新的值并触发 .onchange() 事件。我按照以下方法实现：

document.getElementById("range").value='500';
document.getElementById("range").onchange();

我的输入ID是范围。 我收到了以下错误信息：

Uncaught TypeError: Cannot read property 'target' of undefined

有没有一种方法可以定义“target”？ 谢谢

- Mircea

---

这个回答解决了你的问题吗？如何手动触发onchange事件？ - ggorlen

Answer 1

尝试使用fireEvent或dispatchEvent（根据浏览器）来触发事件：

document.getElementById("range").value='500';
if (document.getElementById("range").fireEvent) {
    document.getElementById("range").fireEvent("onclick");
} else if (document.getElementById("range").dispatchEvent) {
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("click", true, true);
    document.getElementById("range").dispatchEvent(clickevent);
}

- GôTô

---

我认为 fireEvent() 是仅适用于IE的函数。符合标准的浏览器使用 dispatchEvent()。 - Pointy

我在这里遇到了一个“未捕获的类型错误：对象#<an HTMLInputElement>没有方法'fireEvent'”的错误。 - Mircea

更新2022：根据https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent "[t]his feature [(Event.initEvent())] is no longer recommended"。改用Event构造函数，然后调用dispatchEvent。示例和文档请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/Event/Event - S. Doe

Answer 2

关于target的错误是因为事件处理程序中有代码尝试读取与更改事件相关联的Event对象的target属性。您可以尝试传入一个伪造的事件来欺骗它：

var range= document.getElementById('range');
range.onchange({target: range});

或者，如果可以的话，请更改处理程序代码以使用this而不是event.target。除非您正在使用委托（从父对象捕获子对象上的更改事件，由于IE不会“冒泡”它们，因此对于更改事件来说这是麻烦的），否则更改事件的目标始终将是注册事件处理程序的元素，使event.target变得多余。

如果事件处理程序除了target之外还使用Event的更多属性，则需要模拟更多内容，或者选择使用“真实”的浏览器接口来分派事件。如果可能使用事件监听器（addEventListener或IE中的attachEvent），因为它们不会显示在直接的onchange属性上，所以这也是必要的。这取决于浏览器（对于IE的fireEvent，对于标准的dispatchEvent），并且在旧的或更晦涩的浏览器上不可用。

- bobince

Answer 3

来源： http://www.mail-archive.com/[e-mail]/msg44887.html

有时需要通过编程方式创建事件。（这与运行事件函数（触发）不同）

可以通过以下代码进行操作：

> var el=document.getElementById("ID1")
> 
> fire(el,'change')
> 
> 
>    function fire(evttype) {
>        if (document.createEvent) {
>          var evt = document.createEvent('HTMLEvents');
>          evt.initEvent( evttype, false, false);
>          el.dispatchEvent(evt);
>        } else if (document.createEventObject) {
>          el.fireEvent('on' + evttype);
>        }    } looks like this trick is not yet in jQuery, perhaps for a
> reason?

- SquidScareMe

Answer 4

一般来说，您的代码应该正常工作。不过可能会有其他问题导致出现问题。

• 您在哪里运行这两行代码？
• 您确定带有range id的元素在运行代码时已���加载完成（例如在document.ready中运行）吗？
• 您确定页面上只有一个id为range的元素吗？
• 您的onchange()函数在做什么（在此处发布可能会有帮助）？

除此之外，我建议使用jQuery（如果可能的话）：

$('#range').trigger('change');

或者只是

$('#range').change();

http://api.jquery.com/change/

但正如我所提到的，您的情况也应该可以正常工作：http://jehiah.cz/a/firing-javascript-events-properly

- Yakimych

Answer 5

这对我来说似乎是有效的（查看这个fiddle）。你是否有其他可能引起问题的代码？你是如何定义你的onchange处理程序的？

在你的onchange处理程序中是否调用了e.target？我怀疑这可能是问题所在...因为你是通过程序进行改变，所以没有相应的窗口事件。

- Mike C