141

I installed an event handler on an input using

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

As expected, the handler is triggered when I type into the text field, but I also need to invoke this handler from my code. How can I simulate the input event so that my event listener is called?

4

3 Answers 3

232

Create an Event object, and dispatch it

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

Or, as a one-liner:

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

FIDDLE

This is not supported in IE, for that the old-fashioned way has to be used

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

elem.dispatchEvent(event);
5
  • @jeff-h From MDN: Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method. developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
    – HelloWorld
    Jan 14, 2019 at 21:41
  • A note: the default input event is not cancelable Jan 18, 2019 at 10:59
  • 25
    modern copy paste: element.dispatchEvent(new Event('input', { bubbles: true }))
    – Seph Reed
    Aug 16, 2019 at 20:33
  • 6
    How is this difference from new InputEvent() and when should InputEvent be used instead? Nov 16, 2021 at 20:14
  • InputEvent is a newer Spec by MDN and not yet HTML standard, albeit widely supported. If you don't need it, I would simply use "Event" for it's been here forever and won't change much anymore. github.com/microsoft/TypeScript/issues/… Feb 10 at 9:52
37
element.dispatchEvent(new Event('input'));
21

If you are using react, following will work:

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 }));
2
  • 1
    Object.getOwnPropertyDescriptor(this.textInputRef, 'value') -> returns undefined, sometimes.
    – dnaz
    Aug 10, 2021 at 12:03
  • YES - thank you. Was pulling my hair out on this when I realized the client site was a react app. Worked great when no other change or keypress methods were working and the textarea would just revert to blank upon losing focus. This fixed it and triggers the change event as needed.
    – OG Sean
    Oct 30 at 20:19

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.