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

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

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

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

115760 次浏览
小开
最佳答案

使用普通 JavaScript 触发事件的正确方法是创建一个 Event 对象并分派它

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

element.dispatchEvent(event);

或者，就像一句简单的俏皮话:

element.dispatchEvent(new Event('input', {bubbles:true}));

小提琴

IE 不支持这一点，因为老式的方法仍然需要使用

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


elem.dispatchEvent(event);
小开

如果您使用的是反应，以下将工作:

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 }));
小开 
element.dispatchEvent(new Event('input'));

提交答案