如何在没有 jQuery 的情况下以编程方式触发“输入”事件?

IT技术 javascript
2021-02-05 09:54:39

我在inputusing上安装了一个事件处理程序

var element = document.getElementById('some-input');
element.addEventListener('input', function() {
    console.log('The value is now ' + element.value);
});

正如预期的那样,当我在文本字段中键入时会触发处理程序,但我还需要从我的代码中调用此处理程序。如何模拟input事件以便调用我的事件侦听器?

4个回答

使用纯 JavaScript 触发事件的正确方法是创建一个 Event 对象,然后调度它

var event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

element.dispatchEvent(event);

小提琴

IE 不支持这个,因为还是要使用老式的方式

var event = document.createEvent('Event');
event.initEvent('input', true, true);

elem.dispatchEvent(event);
注意:默认输入事件不可取消
2021-03-23 09:54:39
new InputEvent()与何时应该使用 InputEvent 有何不同?
2021-03-24 09:54:39
现代复制粘贴: element.dispatchEvent(new Event('input', { bubbles: true }))
2021-03-29 09:54:39
@jeff-h 来自 MDN:旧版本的 IE 支持等效的专有 EventTarget.fireEvent() 方法。developer.mozilla.org/en-US/docs/Web/API/EventTarget/...
2021-04-03 09:54:39
element.dispatchEvent(new Event('input'));

如果您使用的是react,以下将起作用:

const valueSetter = Object.getOwnPropertyDescriptor(this.textInputRef, 'value').set;
const prototype = Object.getPrototypeOf(this.textInputRef);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(this.textInputRef, 'new value');
} else {
    valueSetter.call(this.textInputRef, 'new value');
}
this.textInputRef.dispatchEvent(new Event('input', { bubbles: true }));
Object.getOwnPropertyDescriptor(this.textInputRef, 'value') -> 有时返回未定义。
2021-04-01 09:54:39

试试这个代码

var event = document.createEvent('Event');
event.initEvent('input', true, true);

elem.dispatchEvent(event);
在回答旧问题时,如果您包含一些上下文来解释您的答案如何提供帮助,您的答案对其他 StackOverflow 用户会更有用,特别是对于已经有公认答案的问题。请参阅:我如何写出一个好的答案
2021-04-02 09:54:39