触发“onchange”事件

仅当用户输入某个值时才触发“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>

感谢

来源

2012-01-09 Caio

您必须在更改值后手动触发事件。看到这个问题：http://stackoverflow.com/q/2490825/615754 – nnnnnn 2012-01-09 13:56:58

当你改变输入值与JavaScript为什么不发射一些事件呢？你为什么要使用onchange？ onchange是供用户输入的，其余的你可以自己处理。 – ggzone 2012-01-09 13:59:12

绝大多数的时候，你不希望事件被解雇当您用代码更改值时。在这些情况下，您可以通过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事件的任何函数，这通常是我会做的。但有时您想使用实际事件（例如，在使用观察者模式时），并确保通知任何正在监听变更的人。

来源

2012-01-09 13:56:23

我正在使用您的更新答案，它的作用就像一个魅力，但它使我的应用程序太慢，与jQuery的触发器（），它的速度完成时的相同动作。可能是什么原因？我该如何提高性能？ – Abhinav 2017-05-30 13:17:35

如果您progammatically改变值，你已经知道，当这种情况发生时，有什么说你不能把你自己的方法，（同样可能是从实际触发事件处理函数调用），当您更改值？

编辑：否则，如果你特别需要实际的火发生，你可以自己手动指派该事件了。

来源

2012-01-09 13:59:37 OnResolve

图片这里：你有1个功能更新5个输入，每个输入改变时必须调用不同的功能，一切都是动态的，所以你不会知道ID和其他什么.. 最好的方法是添加一个更改监听器输入，调用它需要的功能， – bakz 2017-06-04 20:56:18

克罗德的代码只给了我一个类型错误（没有足够的论据UIEvent.initUIEvent）。更改为：

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

它的工作原理。

来源

2014-01-28 00:20:19 Malte

请注意，initUIEvent已被废弃，并从Web标准中删除，如下所示：https：//developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent – 2015-07-07 10:38:40

注意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);

来源

2015-07-07 10:50:19

触发“onchange”事件

回答

相关问题