Question

我有一个输入文本，可以从javascript函数（带倒计时的计时器）获取其值。

我想在输入文本为0时引发一个事件，所以我使用了更改eventListener。

不幸的是，当更改来自javascript函数时，它似乎没有引发事件。

即使更改来自javascript而不是来自用户，我如何强制更改事件才能正常工作？

感谢您的帮助

Answer 1

更改
当控件失去输入焦点并且自获得焦点后其值已被修改时，会发生更改事件。此事件对INPUT，SELECT和TEXTAREA有效。元件。

当您通过代码修改文本输入的值时，不会触发更改事件，因为没有焦点更改。您可以使用createEvent和dispatchEvent自行触发活动，例如：

el = document.getElementById('x'); ev = document.createEvent('Event'); ev.initEvent('change', true, false); el.dispatchEvent(ev);

实时版本：http://jsfiddle.net/ambiguous/nH8CH/

Answer 2

在更改值的函数中，手动触发change事件。

var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);

Answer 3

更可重复使用的选项：

function simulate_event(eventName, element) {
    // You could set this into the prototype as a method.
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    };

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventName, event);
    }
};

Answer 4

现在是2018年，似乎不赞成使用initEvent（）： https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

我认为您现在可以单线触发事件： element.dispatchEvent（new Event（'change'））;

Answer 5

使用getAttribute("value")和setAttribute("value", newValue)在getter和setter中简单地重新定义节点的“ value”属性，并在setter的末尾调度“ change”事件。例如：

myNode.onchange = e => console.log("Changed!", e.target.value);

Object.defineProperty(myNode, "value", {
  get: () => myNode.getAttribute("value"),
  set(newValue) {
    myNode.setAttribute("value", newValue);
    myNode.dispatchEvent(new Event("change")); //or define the event earlier, not sure how much of a performance difference it makes though
  }
})

var i = 0;
setTimeout(function changeIt() {
    if(i++ < 10) {
        myNode.value = i;
        setTimeout(changeIt, 1000);
    }
}, 1)

<input id="myNode">

Answer 6

您可以使用 change 事件代替 keypress。

这是因为 change 事件在它不再聚焦之前不会触发 - 当您点击输入标签时。

当更改来自另一个函数时，onchange事件不会触发

6 个答案: