- [Instructor] Event handlers work fine if we're only triggering functions based on DOM level events and then only trigger a single function when that event occurs. In the example we built in the previous movie, we only had one event tied to the CTA button. What happens if we create a second event? Right here, at the bottom of my script.js file in the exercise files for this movie, 07_04 I have the CTA.onclick event already. What happens if I add CTA.onclick...
Equals console log The button was clicked. And save. Back in the browser, I can now click on the button and you'll notice I get that old behavior back where I skip up to the top. You'll also notice the alert is not revealing itself and if I go and look at the console, you can see it says the button was clicked. But that only happened once so now I pretty much terminated my script.
What's happening here is the second event handler is taking precedence over the first one so my entire script is broken. That's unfortunate if I want multiple things to happen on a single event. The good news is, the event handler is just one way of handling events. If we want to bind functions to browser-level events or tie more than one function to an event, we use a more modern approach called the event listener. An event listener quite literally listens for an event to occur and then passes the event onto the specified function.
Let's see how this changes our event handler example. In place of our event handler, we grab the CTA element. Then add event listener. And here, we're monitoring the click event. We'll bind it to the reveal function. And define how we want the browser to capture the event either from the most specific node so the anchor, in which case we set the last parameter to false.
All right, enough of that. Let's see how this event listener works in my browser. Back in my example, I click on book now. The alert opens, click the button again. The alert closes, I have no skipping in the browser and everything is fine. Let's try binding a second event listener to the same button and see if we can do two things at once. So, CTA... Add event listener click, and this time I'll add anonymous function as the function.
So function... And console log, the button was clicked. And finally, false. So now we have two event listeners on the same element and the same event. Back in the browser, click the button and the alert opens. Click the button again, the alert closes. And if I open my console and click, you'll see every time I click we count up another instance of the text the button was clicked.
That means both events are running at the same time and we can now stack multiple events onto the same interaction which can be really useful. This is cool and all but event listeners have one more trick up their sleeve. And this requires a different and I must admit, a bit silly demo. In the exercise files, you'll find a second document called mouse tracker. If you go in and look at the html, you'll see here we just have some very basis CSS. And then, a single div with a class circle with no content in it.
What matters here is the script file called tracker script where we have a ton of script, I'll explain this in a few seconds but first let's jump to the browser. The mouse tracker demo shows a very important feature in an event listener. The event listener will constantly listen for events and any time the event happens, it kicks in again and again. So what's happening here is every time I move the mouse, the event listener kicks in and moves the circle.
And you can see it's moving in the opposite location of the mouse. And then if I get close and touch the circle, the circle changes color. As long as I'm inside the circle, the color changes. When I get out of it, it goes back to just a red circle. This is a basic demo of how event listeners can be used to constantly monitor an event. Let's take a look at the script. I've added plenty of comments in here so you can read through this and figure out how it works later. But here's the jist of it. First, I set up two constants. Here, I get the entire body element.
That's where I'm going to track the mouse. Then I get the circle itself. Then we get the window inner width and the window inner height. That's the actual width and height of the viewport. Then if we scroll down to the bottom, I have three event listeners. The first one grabs the area, that is the body element. So the entire page. And listens for the mouse move events any time the mouse moves. When movement occurs, the mouse coordinates function kicks in. Mouse coordinates grabs the event object, finds the current x and y positions for the mouse, and does the math to find the opposite position.
And then uses those values to set the left and top properties of circle. The next event listener looks at the circle itself and listens for when the mouse enters the circle. When that happens, it runs change color on touch, which is a very small function that simply changes the background color and the border color of the elements. The last event listener listens for when the mouse leaves the circle. When this happens, it runs an anonymous function that removes the style attribute from circle.
It's crude but it works. Dig through this code, play around with it, and figure out how it works. For an added challenge, try adding a second circle and move that differently from the first one.
- Working with data
- Using functions and objects
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality