- This headlamp has hidden features.
In addition to just turning it on and off with the button,
I can also change the brightness of the light
by turning it on and then holding down the button.
I can also change the type of light emitted
if I rapid click the button.
And when I click the button, it indicates
how much battery is left on it.
This is all possible thanks to event handling.
Anytime a defined event happens,
like the button being pressed and released,
the program inside the flashlight detects that event,
identifies what type of event it was
and fires the corresponding program.
So pressing and releasing the button is one event.
It turns the light on and off.
Another event is pressing and holding the button.
It triggers the brightness level to change.
Yet another event is pressing and releasing rapidly.
It triggers mode changes.
When we interact with computer software,
we are literally firing events that are then detected
and captured and handled by the software.
Click on your mouse, and the click event is detected.
Press a button on a keyboard and an event
identifying what key was pressed and for how long
it was pressed is captured.
Each of these events and others like it
can have their own custom functions attached to them
specifying exactly what happens when the event is captured.
This process is called event handling,
and it is key to JavaScript interactivity.
In this chapter, we'll look at event handling
in JavaScript with a special focus on DOM events.