How can I trigger an onchange event manually in javascript?

You can dispatch events on individual elements using the dispatchEvent method. Let's say you have an element test with an onChange event −

<input id="test" type="text"/>

Event handler −

document.querySelector('#test').addEventListener('change', () =>
console.log("Changed!"))

Triggering the event manually −

const e = new Event("change");
const element = document.querySelector('#test')
element.dispatchEvent(e);

This will log the following −

Changed!

Ayush Gupta

Updated on 27-Nov-2019 10:46:10

• Related Questions & Answers
• How can I trigger a JavaScript click event?
• How to trigger event in JavaScript?
• HTML onchange Event Attribute
• How does jQuery Datepicker onchange event work?
• Can I wrap a JavaScript event in a jQuery event?
• Trigger an event IMMEDIATELY on mouse click, not after I let go of the mouse - JavaScript?
• How can I manually set proxy settings in Python Selenium?
• The onchange event is not working in color type input with JavaScript
• How do I manually throw/raise an exception in Python?
• How can I move an existing MySQL event to another database?
• How can I show image rollover with a mouse event in JavaScript?
• How can an exception be thrown manually by a programmer in java?
• How can I get onclick event on webview in Android?
• How can we destroy a trigger?
• How can we create multiple MySQL triggers for the same trigger event and action time?