Simulating Events with JavaScript
The event-callback sequence in Javascript is pretty straightforward conceptually. When an event is triggered, the callback executes - i.e. Click the “Like” button and a “Like” is registered. What if we wanted to trigger an event OUTSIDE of the event listener? A simple answer might be to just place another event listener and callback, but a more interesting answer could be to simulate the event.
Simple Event Review
In order to understand how events can be simulated, we must first understand how they are constructed. Here’s the typical way of adding event listeners on DOM elements.
We’re adding an event to the button we’ve selected, and when the button is clicked, the callback executes, logging “Button Clicked!” in the console. In this example, we’re using the default ‘click’ event by passing it in as the first argument of addEventListener.
The click event is one of many event types that comes built into JavaScript. These event types are already defined and have default options that dictate how they work. Luckily, JavaScript also has constructors for events that can be used outside of the “addEventListener” function.
Event Constructors
Event is a class in Javascript, and we are creating a new instance of an event when we use the phrase “new Event(…)”. We can also pass in options for the event that might be different from the default events. Let’s look at an example of a constructed event.
Line 2 creates a “click” event with the options passed in, and line 5 calls that event on the button. The thing that “.dispatchEvent” gets called on is the same thing that gets an “.addEventListener”. These two steps are the basic necessities of simulating events. An event needs to be created, and that event needs to be dispatched. If we put this code together with the code above, when the fake click event is dispatched, we should see “Button Clicked!” in the console.
Some events use specific constructors, and therefore have different options. In the example above, we’re making a fake keyboard event that simulates the “e” key being pressed along with the shift key being held down. You should also notice that we’re dispatching the event to the document. The document, in this case, is what would be listening for the key to be pressed.
Why simulate events?
The pen I’ve made here shows the concepts of event simulation in action.
An interesting concept to take away from the example above is the fact that simulated events keep the targets of the event listeners intact. For example, if we wanted the “Simulate a click on the color button” to change the background color of the div that the button is in, we could write something like this:
Notice that we have to rewrite the function to change the color because we no longer have access to the div we’d like to change through event.target. This code is not very DRY. However, if you simulate the event, the original callback gets called, and the event.target doesn’t change because you are dispatching the event to the original target. This allows us to skip writing a bunch of code that looks too similar.
We can see the usefulness of the simulated event in the “copy” section of the pen as well. When the text is copied, an event is fired that flashes the message “Text copied!” on the screen. What if we wanted a button that copied the text for the user? Where have we seen this before?
If you didn’t know already, that button circled in the picture copies the link in the input FOR you. Github doesn’t let us know that text was copied, though. The pen does, and does so even when the event is simulated! The “simulate” button not only copies the text for us, but simulates the copy event being fired on the text, and will therefore display the “Text copied!” message whether we copy the text directly, or copy it using the button.
These are just some of the possibilities with simulating events in Javascript. There are so many different types of events, one could build a Rube-Goldberg machine with the power of event simulation.
