- There are so many different Dom events to listen to,
and there is literally no limit
other than your imagination to what you can do
with an event listener when an event is triggered.
In this practice example,
I want you to just dive headfirst into event listeners
and events to explore what events success,
and what you can do with them.
In the practice files,
I've set up a grid for you to play around with.
You can listen for events on the grid as a whole
to individual cells in the grid,
or just do something entirely different.
It is entirely up to you.
Nevertheless, here are some suggestions
on what you can try out if you want to.
Use an event listener to add CSS, either inline
or through an added class
to draw highlight around the entire grid
when you hover over it and then take the highlight away
when you move your mouse out.
Add an event listener to each grid cell
to highlight that cell
when you hover your mouse over it.
Or add an event listener to each grid cell
to change its background color when you click on it.
You can add an event listener to a specific key
on the keyboard and change the background color
of the whole page from dark to light and back again,
or do something else.
To get started and to get some ideas,
I recommend visiting the MDN event reference page
and looking for some specific events
you want to test out.
As an example, the key down and key up events
allow you to detect what key is pressed
and when that key is released on a keyboard.