- Create event listeners on DOM nodes using
addEventListener()
In this lab we will learn how to teach nodes to "listen" for an event using
addEventListener()
.
If you haven't already, fork and clone this lab into your local environment.
Navigate into its directory in the terminal, then run code .
to open the files
in Visual Studio Code. Finally, run npm install
to install the lab's
dependencies.
In order for JavaScript to handle an event, we first need to tell it to listen
for that event. We do this by calling the addEventListener()
method on the
element we want to add the listener to, and passing it two arguments:
- the name of the event to listen for, and
- a callback function to "handle" the event
Open up index.html
in the browser. When you click in the <input>
area,
nothing happens. Let's set up some event handling. Specifically, let's add an
event listener for the click
event on the input#input
element in
index.html
.
Try out the following in the Chrome DevTools console:
const input = document.getElementById('input');
input.addEventListener('click', function() {
alert('I was clicked!');
});
Now when you click inside of input#input
, you will get an alert box.
Let's review what's happening in this code.
First, we grab the element that we want to add the event listener to and save a
reference to it in the input
variable.
Next, we call addEventListener()
on that element to tell JavaScript to listen
for the event. We pass two arguments to addEventListener()
: the name of the
event to listen for (in this case, click
) and a callback function that will
be executed when the event is "heard."
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
That's exactly what's happening here: we're passing a callback function as the
second argument to the addEventListener()
function; the callback will be
invoked as soon as the event occurs.
Let's pull out that second argument and take a look at it:
function() {
alert('I was clicked!');
}
This function has all the components of functions we've seen before (the
function
keyword, a pair of parentheses, and the body of the function enclosed
in curly braces) except one: it doesn't have a name assigned to it. This is
what's called an anonymous function. Because it doesn't have a name, it can't
be invoked directly. But the event listener knows to execute whatever function
is passed as the second argument when it detects the event, so it doesn't need
to be named.
If we are only calling our callback function in that one place, using an
anonymous function makes sense. However, what if we wanted to use that same
alert message on the <div>
containing the number 5
? In that case, it would
make more sense to create a separate, named function that could be called by
both event listeners. With this approach, we would pass the function name as
the second argument to addEventListener()
rather than the function itself:
const input = document.getElementById('input');
function clickAlert() {
alert('I was clicked!');
}
input.addEventListener('click', clickAlert);
To hook up our other div, we would use our CSS selector skills to grab the element and save it to a variable, then add an event listener to that element. Give it a try!
With this approach, if we decide later that we want to change the text of the alert to "Hee hee, that tickles!" instead, we would only need to make that change in one place.
Note: we pass clickAlert
as the argument, not clickAlert()
. This is
because we don't want to invoke the function in this line of code. Instead, we
want to pass a reference to the function to addEventListener()
so it can
call the function when the time comes.
Refresh your browser and try out the latest version of the code in the console
to verify that it works. Also try passing clickAlert()
as the second argument
rather than clickAlert
and see what happens.
Now let's set up index.js
to do the same thing so we can get our test passing.
To do that, simply copy the code into the index.js
file's
addingEventListener()
function and run the test. Either version should pass
the test โ just make sure that the code creating the event listener is inside
the addingEventListener()
function.
We know that the code works in the console and passes the test, but we should
also check our changes to index.js
in the browser. Because you've added the
addEventListener()
function inside the addingEventListener()
function,
recall that you will need to call the outer function in index.js
to execute
addEventListener()
and activate the event listener. Be sure to refresh the
page to load the new code in index.js
.
Currently, the work you've done on this assignmnent is only on your local machine. To preserve your solution on your GitHub fork, you will need to stage the changes you've made, commit them, and push the commit up to GitHub. Use the following commands to do this:
git add .
git commit -m "Completed assignment"
git push
If you visit your fork on GitHub, you should now see that you've made the most recent commit, and your code will be present in the files.