"Firing" Events

After a specific event fires on a specific element in the document object model (or DOM), an event handler function can be created to run as a response. In this lesson, we will learn about event handler functions that modify and update DOM elements after an event fires.

Let’s compare the firing of events to something more familiar: a dog trained to eat when they hear the sound of a bell! (This is known as the Pavlovian conditioning.)

As you can see in the diagram, the ringing of the bell is analogous to a JavaScript event firing. The dog is trained to anticipate the ringing of the bell and this action is analogous to creating an event listener. After the dog hears the bell, it’ll come over and eat its food! This response is like an event handler function that executes code which, in a website, could change an element’s color, text, and much more!”

Most events in the browser take place without being noticed — the events are undetected because there is no event handler associated with the event to execute an action. Event handlers are crucial for creating interactive websites with JavaScript.

Instructions

Check out the diagram to see the event firing process of a dog trained to eat when they hear the sound of a bell.