Javascript 手动触发 .onchange() 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3996616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript manually firing .onchange() event
提问by Mircea
I have an input field I want to assign a new value and fire an .onchange() event. I did the following:
我有一个输入字段，我想分配一个新值并触发 .onchange() 事件。我做了以下事情：
document.getElementById("range").value='500';
document.getElementById("range").onchange();
Where range is my input Id. I get the following error:
其中 range 是我的输入 ID。我收到以下错误：
Uncaught TypeError: Cannot read property 'target' of undefined
Is there a way to define the 'target'? Thank you
有没有办法定义“目标”？谢谢
回答by bobince
The error about targetis because there's code in the event handler that's trying to read the targetproperty of the Eventobject associated with the change event. You could try passing in an faux-Event to fool it:
错误target是因为事件处理程序中的代码试图读取与更改事件关联target的Event对象的属性。您可以尝试传入一个虚假事件来愚弄它：
var range= document.getElementById('range');
range.onchange({target: range});
or, if you can, change the handler code to use thisinstead of event.target. Unless you are using delegation (catching change events on child object from a parent, something that is troublesome for change events because IE doesn't ‘bubble' them), the target of the change event is always going to be the element the event handler was registered on, making event.targetredundant.
或者，如果可以，将处理程序代码更改为使用this而不是event.target. 除非您使用委托（从父对象捕获子对象上的更改事件，这对于更改事件来说很麻烦，因为 IE 不会“冒泡”它们），更改事件的目标始终是事件处理程序的元素已注册，使event.target冗余。
If the event handler uses more properties of Eventthan just targetyou would need to fake more, or go for the ‘real' browser interface to dispatching events. This will also be necessary if event listeners might be in use (addEventListener, or attachEventin IE) as they won't be visible on the direct onchangeproperty. This is browser-dependent (fireEventfor IE, dispatchEventfor standards) and not available on older or more obscure browsers.
如果事件处理程序使用的多个属性Event不仅仅是target你需要更多的假货，或去“真正的”浏览器界面调度事件。如果事件侦听器可能正在使用（addEventListener或attachEvent在 IE 中），这也是必要的，因为它们在直接onchange属性上不可见。这取决于浏览器（fireEvent对于 IE，dispatchEvent对于标准），并且在较旧或更晦涩的浏览器上不可用。
回答by G?T?
Try using fireEventor dispatchEvent (depending on browser) to raise the event:
尝试使用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);
}
回答by Yakimych
Generally, your code should work fine. There might be something else that's issuing the problem, though.
通常，您的代码应该可以正常工作。不过，可能还有其他问题导致了问题。
- Where do you run those two lines?
- Are you sure that the element with the
rangeid is loaded by the time you run the code (e.g. you run it in document.ready). - Are you sure that
you only have oneelement with id
rangeon the page? - What is your
onchange()function doing (could be helpful to post it here)?
- 你在哪里运行这两条线？
- 您确定在
range运行代码时加载了带有id的元素 （例如，您在 document.ready 中运行它）。 - 您确定页面上只有一个带有 id 的元素
range吗？ - 您的
onchange()功能在做什么（在此处发布可能会有所帮助）？
Apart from that, I would recommend using jQuery (if possible):
除此之外，我建议使用 jQuery（如果可能）：
$('#range').trigger('change');
or just
要不就
$('#range').change();
But as I mentioned, your case should work fine too: http://jehiah.cz/a/firing-javascript-events-properly
但正如我所提到的，你的案例也应该可以正常工作：http: //jehiah.cz/a/firing-javascript-events-properly
回答by SquidScareMe
from : http://www.mail-archive.com/[email protected]/msg44887.html
来自：http: //www.mail-archive.com/[email protected]/msg44887.html
Sometimes it's needed to create an event programmatically. (Which is different from running an event function (triggering)
This can be done by the following fire code
有时需要以编程方式创建事件。（这与运行事件函数（触发）不同
这可以通过以下消防代码来完成
> 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?
回答by Mike C
This seems to work for me (see this fiddle). Do you have any other code that may be the problem? How did you define your onchange handler?
这似乎对我有用（见这个小提琴）。您还有其他可能有问题的代码吗？你是如何定义你的 onchange 处理程序的？
Are you calling e.target in your onchange handler? I suspect this may be the issue... since you are doing the change programmatically, there is no corresponding window event.
你在 onchange 处理程序中调用 e.target 吗？我怀疑这可能是问题所在……由于您以编程方式进行更改，因此没有相应的窗口事件。
