Event Listeners
Goals
- Understand the concept of an event listener
- Attach an event listener to a button
- Continue building a developers mindset by breaking code and being ok with it!
Event Listeners
Imagine that you’ve just ordered food from GrubHub and are waiting for it to arrive. When the doorbell rings, you’ll stand up from the couch, walk over to the door, open it, and take your food. Guess what? You programmed yourself with an event listener.
In JavaScript, an event listener is a way to set up code to run only when a very specific thing happens. You want to change the color of something when the mouse is in a specific place? Great! That’s an event listener – you’ll tell the code to listen for the mouse to be on a specific element on the page, then run the code that changes the color.
Syntax
Let’s look at this example of an event listener and talk through the pieces.
Applying What We’ve Learned
Try It: Changing HTML with JavaScript
Back in your own Puppy Facts replit, add a button in the HTML.
Write code in the JavaScript pane so that when the button is clicked, the title of the webpage changes to a different topic!
If you complete that with extra time, change the text in the p tags so that when the button is clicked, the facts match your new topic!
🌶Click here for a Spicy Challenge🌶
Wouldn't it be nice if the user could toggle back and forth between Puppy Facts and your other facts? Add another button, then implement the code to make this happen.