How can I trigger an onchange event manually?

Spot the Situation: OnTrigger()

Often, you might need to artificially trigger an onchange event, as automatic firing may not occur when JavaScript or widgets like a calendar change an input field's value.

Imagine you're in a James Bond movie and need to manually detonate the bomb. That's our onchange event, folks!

Method Madness: Casting a Wide Net

Modern browsers say new Event('change') is their bae, but some older ones won't reciprocate those feelings. Therefore, we need to reach out to them in a language they'll understand!

var event;
if (document.createEvent) { //Speak to me, darling!
    event = document.createEvent('HTMLEvents');
    event.initEvent('change', true, false);
    document.querySelector('#myInput').dispatchEvent(event); //You're talking my language!
} else if (document.createEventObject) { // IE before version 9, oh you old fossil!
    event = document.createEventObject();
    document.querySelector('#myInput').fireEvent('onchange', event); //The archaeologists have deciphered this script.
}


Our goal is simple—to cater to all ages, even our much-loved legacy browsers!

The Hogwarts of Events: Properties & Handlers

Fancy an event object with custom properties or perhaps to tinker with how the event behaves? Let's step in, fellow wizards!

var customEvent = new CustomEvent('change', {
  detail: { 'userData': 'someValue' }, //A sneak peak into user's mind!
  bubbles: true, cancelable: true //Navigation control at your fingertips!
});
document.querySelector('#myInput').dispatchEvent(customEvent); //Geez, that was magical!


If the handler function is your cozy friend, no harm in invoking it directly, eh?

function myChangeHandler() { //Hello, old friend!
    // Change logic, GO!
}
var inputElement = document.querySelector('#myInput');
myChangeHandler.call(inputElement); // Would you... handle this change for me?


Mind The Traps!

Remember to wake up from your slumber when...
The Phantom Change: Check the element's value before triggering to avoid duplicity in event handling.
The Fickle Focus: Beware! Manual triggering won't cover all user interactions like blur or focus.

Beyond the Console

When you set your sights on the BIG PICTURE, few extra bytes of knowledge won't hurt.

Dynamic Creation is a thing. So, when you manufacture an input element, accompany it with very personal event listeners.

var newInput = document.createElement('input'); // “It's alive! It's alive!”
newInput.id = 'dynamicInput';
newInput.addEventListener('change', function (event) { // It can interact too!
    // Handle change, now!
});
document.body.appendChild(newInput);  // Welcome to the world!


Working with React or Vue? No worries, you can still fire native events.

And remember, in Selenium or Cypress, triggering events manually is a skill worth exhibiting.