Javascript 手动触发 .onchange() 事件答案

【问题标题】：Javascript manually firing .onchange() eventJavascript 手动触发 .onchange() 事件
【发布时间】：2010-10-22 12:08:25
【问题描述】：

我有一个输入字段，我想分配一个新值并触发一个 .onchange() 事件。我做了以下事情：

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

range 是我的输入 ID。我收到以下错误：

Uncaught TypeError: Cannot read property 'target' of undefined

有没有办法定义“目标”？谢谢

【问题讨论】：

这能回答你的问题吗？ How can I trigger an onchange event manually?

标签： javascript input onchange

【解决方案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);
}

【讨论】：

我认为fireEvent() 是一个仅限 IE 的东西。符合标准的浏览器使用dispatchEvent()。
我收到“Uncaught TypeError: Object # has no method 'fireEvent'”错误

【解决方案2】：

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

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

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

如果事件处理程序使用Event 的更多属性而不仅仅是target，您将需要伪造更多，或者使用“真实”浏览器界面来调度事件。如果可能正在使用事件侦听器（addEventListener 或 IE 中的attachEvent），这也是必要的，因为它们不会在直接的onchange 属性上可见。这是依赖于浏览器的（fireEvent 用于 IE，dispatchEvent 用于标准）并且不适用于较旧或更晦涩的浏览器。

【讨论】：

【解决方案3】：

来自：http://www.mail-archive.com/jquery-en@googlegroups.com/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?

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

这似乎对我有用（见fiddle）。你还有其他可能是问题的代码吗？您是如何定义 onchange 处理程序的？

您是否在 onchange 处理程序中调用 e.target ？我怀疑这可能是问题所在...由于您正在以编程方式进行更改，因此没有相应的窗口事件。

【讨论】：