Question

我使用

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

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

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

Answer 1

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

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

element.dispatchEvent(event);

FIDDLE

IE不支持此功能，因为仍然需要使用老式的方式

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

elem.dispatchEvent(event);

Answer 2

此答案隐藏在注释中，但比最受欢迎的答案更简洁，因此，我将尝试一下作为其答案。希望对您有所帮助。

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

或者甚至只是...

element.dispatchEvent(new Event('input'));

Answer 3

如果您使用的是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 }));

Answer 4

尝试此代码

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

elem.dispatchEvent(event);

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

4 个答案: