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 162 · Accepted Answer · edited Jan 31 '22 at 21:27

162

The proper way to trigger an event with plain JavaScript, would be to create an Event object, and dispatch it

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

Or, as a simple one-liner:

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

FIDDLE

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

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

elem.dispatchEvent(event);

edited Jan 31 '22 at 21:27

joe

1,766
1
18
27

answered Feb 26 '16 at 18:56

adeneo

303,455
27
380
377

@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 – pmiguelpinto Jan 18 '19 at 10:59
21

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

How is this difference from `new InputEvent()` and when should InputEvent be used instead? – light24bulbs Nov 16 '21 at 20:14

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

26

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

edited Nov 13 '21 at 16:41

answered Jun 30 '20 at 14:30

RedDragonWebDesign

1,109
2
12
21

score 12 · 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

score -5 · Answer 4 · edited Nov 28 '19 at 10:43

-5

Try this code

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

elem.dispatchEvent(event);

edited Nov 28 '19 at 10:43

sanjeev

1,635
16
33

answered Nov 28 '19 at 10:10

Antare74

37
2

7

When answering an old question, your answer would be much more useful to other StackOverflow users if you included some context to explain how your answer helps, particularly for a question that already has an accepted answer. See: [How do I write a good answer](https://stackoverflow.com/help/how-to-answer). – David Buck Nov 28 '19 at 10:34

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

4 Answers4

Linked