在没有用户交互的情况下触发的 Javascript 事件？答案

【问题标题】：Javascript event that fires without user interaction?在没有用户交互的情况下触发的 Javascript 事件？
【发布时间】：2010-10-10 01:41:22
【问题描述】：

我的表单上的文本框可能会根据在各种下拉列表中选择的内容而改变。

有没有办法在文本框值更改时调用 javascript 函数？

尝试过 onchange 事件，但这似乎只有在用户手动更改文本框值时才有效。

干杯，

布伦丹

【问题讨论】：

标签： javascript events

【解决方案1】：

不，javascript 触发的表单元素更改不会触发事件。如果他们这样做了，这将导致各种递归无限循环。

简单的解决方案是在您更改文本框的值时手动调用 onchange 函数，但是您也可以使用某种包装函数。作为一个非常基本的例子：

function updateTextField(new_text) {
  text_field.value = new_text;
  text_field.onchange();
}

【讨论】：

【解决方案2】：

从你的 JS 代码中设置文本框的内容时，调用另一个函数，传入要设置的文本，然后你可以从任何你需要的地方调用它，然后执行你的逻辑。

【讨论】：

【解决方案3】：

尝试使用 setTimeout 将负责更改控件值的逻辑与 onchange 事件的执行路径断开连接。

<html>
  <head>
    <script type="text/javascript">
      function setValue(target) {
        alert("changed - value: " + target.value);
        setTimeout("reallySetValue('" + target.id + "');", 1);
      }
      function reallySetValue(id) {
        var control = document.getElementById(id);
        control.value += control.value;
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        Enter "a" here: 
        <input type="text" id="test" onchange="setValue(this)">  
        <br/>
        <br/>
        <input type="text">  
      </div>
    </form>
  </body>
</html>

这里有图解 Changing a Textbox Value in its OnChange Event

【讨论】：

【解决方案4】：

在网络浏览器中，控件上的编程更改不会触发该控件上的事件。您必须指示更改文本框值的代码触发 onchange 事件。这就是你可以用普通的 javascript 做到这一点的方法：

var textbox = document.getElementById("boxId");
textbox.value = "Abc";
textbox.onchange();

当然，使用像 jQuery 这样的库会更容易、更健壮：

$("#boxId").val("Abc").change();

【讨论】：

【解决方案5】：

您可以使用出色的event.simulate.js 来做到这一点。不过，此脚本确实依赖于 Prototype.js 库。

如果您想在不依赖外部库的情况下执行此操作，请查看 fireEvent 和 createEvent 函数。一个简单的演示如何实现它：

function triggerEvent(element, eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(eventName, true, true);

        return element.dispatchEvent(evt);
    }

    if (element.fireEvent)
        return element.fireEvent('on' + eventName);
}

triggerEvent(document.getElementById('myTextbox', 'change'));

使用 event.simululate.js，你可以这样做：

Event.simulate('myTextbox', 'change');

这里提出了一个类似的问题：Trigger an event with Prototype。

编辑：虽然可以使用document.getElementById('myTextbox').change()，但我不建议这样做，因为它会使您的代码不太灵活。将 onChange 事件附加到文本框时，手动调用 change() 事件时不会触发这些事件。使用上述方法，事件将传播，就像事件是用户触发的一样。

【讨论】：

【解决方案6】：

假设前端是html：

您可以安装一个 timout 回调并以例如 100 毫秒的间隔查询文本框的内容，并将其与您存储在变量中的某个先前值进行比较。

关键字：window.setTimout(), window.setInterval()

【讨论】：

【解决方案7】：

我建议查看 YUI 的自定义事件，例如： YUI Custom Event Example Link

您只需将此脚本附加到事件操作中

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

然后您就可以使用自定义事件（HTML 中的任何地方） fnSubscriberChange - 在这个 Func 中，你可以做任何你想做的事情。您可以将您的文本框更改值逻辑放在这里，并取决于更改的选择框值 - 调用所需的函数。依赖事件监听的逻辑清晰易修改； YUI 库支持所有浏览器，因此您不必介意浏览器功能。

文本框和选择框：

 <input type='text' id='id_text_fld' value=''/>
    <select id='id_sel_one'>
     <option value="test1">Test1
     <option value="test2">Test2
    </select>
    <select id='id_sel_two'>
     <option value="test3">Test3
     <option value="test4">Test4
    </select>

事件脚本：

<script>
    (function() {

        //create a new custom event, to be fired
        var onChangeValue = new YAHOO.util.CustomEvent("onChangeValue");
        // Attach change event listener for Select boxes by their IDs
      YAHOO.util.Event.on( ['id_sel_one', 'id_sel_two'], 'change', fnCallback, this);  
      // Function to call when Change event on Select occures
        fnCallback = function(e) { 
            alert("This elem:" + this.id+ " changed value to:" + this.value);
            // Fire our Custom event 
        onChangeValue.fire({dom_el: this}); // passing select box element [this] to function 
      }

      // Listen for Custom event and call our Func 
      onChangeValue.subscribe(fnSubscriberChange); // Lets listen for ChangeValue event and call our Func 
        fnSubscriberChange = function(type, args) {
             alert("Event type:" + type + " dom el id:" + args[0].dom_el.id );
             var dom_el = args[0].dom_el; // Select Box that produces Change
        };
    })();
    </script>

【讨论】：