Get in Touch
Thank you for your interest! Please fill out the form below, and I will do my best to get back to you.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

How to Manually Trigger Events in JavaScript

Garth Henson
2 Mar 2010

Occasionally, I find need to be able to manually trigger a predefined JavaScript event from within the context of a web application. Those of you who didn’t understand that first statement may want to stop reading now or risk suffering from extreme boredom, but those who actually have encountered the same challenge in coding, please read on!

Let’s examine a possible scenario that could merit actually taking hold of the reigns on individual event calls. Consider the situation that you have devised a very user friendly data entry form, and in conjunction with specifications, you have a select box that triggers certain fields to be visible based on user selection. Typically, you would have simply attached a listener to the select box’s onchange event that checks the value of the field and performs the necessary showing and hiding. So far, we have done nothing difficult or out of the ordinary.

Now, suppose you also have need to be able to populate the form with a preexisting data set and get your form to behave in the same way. You could always write an onload listener for the body of your page that runs all the field checks and manipulates the fields accordingly, and in most cases, this may not be a poor solution. However, when loading dynamically via AJAX or other method, the onload event may not be triggered, and therefore, neither is your form updated.

To get around this untimely issue, we can set up a sort of reset method that manually triggers all our events within our form, allowing the attached listeners within those fields to run their own checks and manipulate the form as needed. Let’s use a very simplistic example — that of the select box and hidden field mentioned above. In our case, let’s make it extremely easy: our select box will have only a yes and no value that will enable or disable an associated text field.

For sake of argument, let’s say we have a select box that allows a user to select whether or not they have an email address, and our listener will disable our text field for email address entry if the select box is set to no. With our form in place — and fields nicely ID’d for our selecting pleasure — we can easily write a very simplistic listener that will disable or enable the email address field based on what was selected:

So far, we shouldn’t have covered anything ground-breaking in the least. However, let’s assume that we have just executed and AJAX request to populate the fields of our form and the select box has been dynamically set to no. Those of you with any JavaScript experience will know that this does not trigger the onchange event, because no user interaction has taken place with that select box. Instead, to update our UI, we need to trigger that event in order to disable the email address field.

To do so, we simply need to check if our desired event listener has been defined on our object and verify that it is a function that can be executed. This can very easily be done like so:

Now, we simply have to execute this listener manually, keeping in mind that our listener is expecting an event object, complete with a target. Since we have no true event object and we are solely dependent upon the target of the event, we can easily fake the event trigger by adding one line to our code above:

I fully realize that in and of itself, especially in our negligible example, this is not an extremely useful tool; however, in the right contexts, it can save you massive headache. Imagine for a moment that we have a dozen different elements for which we need to manually trigger events. We can set up a single handler that will do our execution for us and save up to dozens of lines of unnecessary code:

By writing our trigger handler in such a way as to allow providing both the object and the event we are checking, we could easily execute multiple events on a single object or even pick and choose different events to trigger at a given time. This can quickly become extremely useful on larger dynamic applications.

I hope this makes as much sense in reading as it did when I was writing it, and I hope that the usefulness is not lost in translation. Let me know if this is of some help to you.

Garth Henson
Garth is as a lead engineer at The Walt Disney Company, specializing in JavaScript applications.

Recent Blog Posts

Let's Work Together
Contact Me