Javascript手動觸發.onchange（）事件

Question

我有一個輸入字段，我想分配一個新值並觸發一個.onchange（）事件。 我做了以下事情：

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

范圍是我的輸入ID。 我收到以下錯誤：

Uncaught TypeError: Cannot read property 'target' of undefined

有沒有定義“目標”的方法？ 謝謝

Answer 1

關於target的錯誤是因為事件處理程序中有代碼試圖讀取與change事件關聯的Event對象的target屬性。 您可以嘗試傳遞一個偽事件來欺騙它：

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

或者，如果可以的話，更改處理程序代碼以使用this而不是event.target 。 除非您使用委派（從父級在子對象上捕獲更改事件，這對於更改事件很麻煩，因為IE不會“冒泡”它們），所以更改事件的目標始終是事件處理程序的元素已注冊，從而使event.target變得多余。

如果事件處理程序使用Event屬性多於target那么您將需要偽造更多，或者使用“真實的”瀏覽器界面來調度事件。 如果可能正在使用事件偵聽器（IE中的addEventListener或attachEvent ），這也將是必需的，因為它們不會在直接onchange屬性上可見。 這是與瀏覽器相關的（對於IE是fireEvent ，對於標准是dispatchEvent ），並且在較舊或更模糊的瀏覽器上不可用。

Answer 2

嘗試使用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);
}

Answer 3

通常，您的代碼應該可以正常工作。 不過，可能還有其他原因在發出問題。

• 您在哪里運行這兩行？
• 您確定在運行代碼時已加載具有range ID的元素（例如，在document.ready中運行它）。
• 您確定頁面上只有一個 ID range為ID的元素嗎？
• 您的onchange()函數在做什么（將其張貼在此處會有所幫助）？

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

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

要不就

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

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

但正如我所提到的，您的案例也應該可以正常工作： http : //jehiah.cz/a/firing-javascript-events-properly

Answer 4

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

Answer 5

這似乎對我有用 （請參閱此小提琴 ）。 您還有其他可能是問題的代碼嗎？ 您如何定義onchange處理程序？

您是在onchange處理程序中調用e.target嗎？ 我懷疑這可能是問題所在...由於您以編程方式進行更改，因此沒有相應的窗口事件。