Learning to Program

Listeners

For your program to care about events, you need to create a listener. A listener basically has two parts:

1. The type of event the listener cares about (see /* event type */ in Listing 7.26)

2. What the listener will do when the event occurs (see the function in Listing 7.26)

Listing 7.26 JavaScript Event Listener Syntax

Click here to view code image

el.addEventListener(/* event type */ 'click', function () {  /* instructions to be executed when the event is triggered */});

You might want to listen when a user clicks a button, presses a key, or taps a picture (in a mobile app). Each of these actions causes an event to be triggered. As an example, let’s create an event listener for kittenbook.html (see Listing 7.27). To make it easier ...