2012-01-09 190 views
14

僅當用戶輸入某個值時才觸發「onchange」事件。當我通過Javascript自動更改值時,爲什麼不能激發事件?有其他選擇嗎?觸發「onchange」事件

動畫:

enter image description here

代碼:

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      document.addEventListener ("DOMContentLoaded", function() { 
       var input = this.getElementsByTagName ("input")[0]; 
       var div = this.getElementsByTagName ("div")[0]; 
       var i = 0; 
       var seconds = 5; 

       div.innerHTML = "The following input should fire the event in " + seconds + " seconds"; 

       var interval = window.setInterval (function() { 
        i ++; 

        if (i === seconds) { 
         window.clearInterval (interval); 

         input.value = "Another example"; 

         div.innerHTML = "Nothing ! Now try change the value manually"; 
        } 
        else { 
         div.innerHTML = "The following input should fire the event in " + (seconds - i) + " seconds"; 
        } 
       }, 1000); 

       input.addEventListener ("change", function() { 
        alert ("It works !"); 
       }, false); 
      }, false); 
     </script> 

     <style> 
      body { 
       padding: 10px; 
      } 

      div { 
       font-weight: bold; 
       margin-bottom: 10px; 
      } 

      input { 
       border: 1px solid black; 
       border-radius: 3px; 
       padding: 3px; 
      } 
     </style> 

     <title>Event</title> 
    </head> 

    <body> 
     <div></div> 
     <input type = "text" value = "Example" /> 
    </body> 
</html> 

感謝

+0

您必須在更改值後手動觸發事件。看到這個問題:http://stackoverflow.com/q/2490825/615754 – nnnnnn 2012-01-09 13:56:58

+0

當你改變輸入值與JavaScript爲什麼不發射一些事件呢?你爲什麼要使用onchange? onchange是供用戶輸入的,其餘的你可以自己處理。 – ggzone 2012-01-09 13:59:12

回答

18

絕大多數的時候,你不希望事件被解僱當您用代碼更改值時。在這些情況下,您可以通過dispatchEvent在現代瀏覽器上觸發綜合事件。 More here

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); // See update below 
event.initUIEvent("change", true, true);  // See update below 
input.dispatchEvent(event); 

Live demo

更新:作爲Benjamin noted,因爲上面寫着:initUIEvent已經被替換爲UIEvent構造,所以這將是

在具體的例子

所以:

input.value = "Another example"; 
var event = new UIEvent("change", { 
    "view": window, 
    "bubbles": true, 
    "cancelable": true 
}); 
input.dispatchEvent(event); 

Live demo

或者,你總是可以直接調用你綁定到change事件的任何函數,這通常是我會做的。但有時您想使用實際事件(例如,在使用觀察者模式時),並確保通知任何正在監聽變更的人。

+0

我正在使用您的更新答案,它的作用就像一個魅力,但它使我的應用程序太慢,與jQuery的觸發器(),它的速度完成時的相同動作。可能是什麼原因?我該如何提高性能? – Abhinav 2017-05-30 13:17:35

1

如果您progammatically改變值,你已經知道,當這種情況發生時,有什麼說你不能把你自己的方法,(同樣可能是從實際觸發事件處理函數調用),當您更改值?

編輯:否則,如果你特別需要實際的火發生,你可以自己手動指派該事件了。

+0

圖片這裏: 你有1個功能更新5個輸入,每個輸入改變時必須調用不同的功能,一切都是動態的,所以你不會知道ID和其他什麼.. 最好的方法是添加一個更改監聽器輸入,調用它需要的功能, – bakz 2017-06-04 20:56:18

1

克羅德的代碼只給了我一個類型錯誤(沒有足夠的論據UIEvent.initUIEvent)。 更改爲:

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); 
event.initUIEvent("change", true, true, window, 1); 
input.dispatchEvent(event); 

它的工作原理。

+0

請注意,initUIEvent已被廢棄,並從Web標準中刪除,如下所示:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent – 2015-07-07 10:38:40

4

注意initUIEvent已被棄用,如規定從Web標準中刪除:developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

這只是它不相同的」 t使用initUIEvent

input.value = 'Another example'; 
var event = new UIEvent('change', { 
    'view': window, 
    'bubbles': true, 
    'cancelable': true 
}); 
input.dispatchEvent(event);