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

Question

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?

possible duplicate of http://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click — user2473779, Feb 26 '16 at 18:52
@user2473779 The answer there implies that I should do `element.input()`, but that’s not a valid method. — bdesham, Feb 26 '16 at 18:56
http://jsfiddle.net/mendesjuan/rHMCy/4/ : check this fiddle from @Juan Mendes' answer — user2473779, Feb 26 '16 at 19:01
@user2473779 The function given there doesn’t handle “input” events. See [this modified version of the Fiddle](http://jsfiddle.net/hbu9jmjj/), which uses an input element instead of an a element. Editing the text triggers the event listener but clicking the button just produces an error. — bdesham, Feb 26 '16 at 19:19

score 221 · Accepted Answer · edited Jun 05 '23 at 21:00

221

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

edited Jun 05 '23 at 21:00

Boris Verkhovskiy

14,854
11
100
103

answered Feb 26 '16 at 18:56

adeneo

312,895
29
395
388

@jeff-h From MDN: Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent – HelloWorld Jan 14 '19 at 21:41
A note: the default input event is not cancelable – pmiguelpinto90 Jan 18 '19 at 10:59
25

modern copy paste: `element.dispatchEvent(new Event('input', { bubbles: true }))` – Seph Reed Aug 16 '19 at 20:33
6

How is this difference from `new InputEvent()` and when should InputEvent be used instead? – light24bulbs Nov 16 '21 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. https://github.com/microsoft/TypeScript/issues/39925#issuecomment-669550088 – Ben Richter Feb 10 '23 at 09:52

RedDragonWebDesign · Answer 2 · 2021-11-13T16:41:34.087

35

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

edited Nov 13 '21 at 16:41

answered Jun 30 '20 at 14:30

RedDragonWebDesign

1,797
2
18
24

score 19 · Answer 3 · answered May 31 '20 at 05:17

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

Object.getOwnPropertyDescriptor(this.textInputRef, 'value') -> returns undefined, sometimes. — dnaz, Aug 10 '21 at 12:03

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

3 Answers3

Linked