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

How do I programmatically trigger an “input” event without jQuery?

本文关键字：方式触 编程 输入 事件 情况下 jQuery      更新时间：2023-09-26

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

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

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

创建一个事件对象，并调度它

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

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 }));
相关文章：