When you create an event handler, you need to associate it with an element in the DOM. For example, the user may click a button. You then register an event handler on the button to run when the button's click event fires.
The mechanism that detects the event is called an event listener. An event listener contains an event name and an event handler. When the event fires, the event handler is executed.
const firstBtn = document.querySelector("button");
Then call the addEventListener() method on this button.
firstBtn.addEventListener("click", (event) => {
console.log("You clicked the button", event);
});
Try clicking the first button on the page. The event handler accepts a single parameter representing an event object. This event object encapsulates some details about the event that occurred. Observe the output in the console.
The event object that is passed to the event handler contains some information that you can use while handling the event. The event object is automatically passed to event handlers when they are invoked. They contain information relevant to the event itself.
For example, you can get the specific element that fired the event with the target property of the event object, as shown here:
firstBtn.addEventListener("click", (event) => {
console.log(event.target);
});
This is especially useful when you attach the same handler to multiple elements. For example, you may want to highlight a specific item in a list when the button associated with that item is clicked. You could attach the same event handler to each of these buttons. Take a look:
// Select all the buttons for all the parks
const allBtns = document.querySelectorAll(".rate-button");
// Iterate through the list of buttons and add an event handler to each
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
console.log(event.target);
});
});
Notice that when you click any of the buttons, you get the same result. So how would you know which park belongs to the button that was clicked?
Because event.target refers to the button that was clicked, then using the parentNode property of that button will get you the parent element that was clicked. Here's what that looks like:
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
console.log(event.target.parentNode);
});
});
Notice that each time you click the button, the parent element in which that button resides is logged to the console. You can then manipulate this element in any way that you wish. For example, the following code changes the background color:
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
const park = event.target.parentNode;
park.style.backgroundColor = "#c8e6c9";
});
});