2.10 Events

Hello and welcome to lesson number 11 where you'll learn about JavaScript events. And actually JavaScript events is a bit improper because the events are happening on the HTML side. All you can do in JavaScript is listen to these events and react accordingly. Now, an event can be something triggered either by the browser, like for example, when the page has finished loading, the browser triggers an event. Or when an image has finished downloading from the server, then the browser triggers another event. Or they can be something triggered by the user, like for example, when you click a button. Now, the list of events is like a mile long and we're not gonna go through all of them. Instead, I'm just gonna pick four which are probably the ones that you're gonna be using the most. And I'm gonna show you how to listen to these events and how to react to them. And there are two ways you can listen to them, either in HTML inline or in JavaScript with addEventListener. Now, the test page I have here is very simple. We have a paragraph in a container and a button. And of course, clicking this button does nothing for now. But, what you can do is say OnClick, and you can execute some JavaScript code. So for example, you can say something like console.log('Button clicked'). So now when I click the button, I get a console log. So that was a piece of JavaScript that you just executed. This is the simplest way to tie into an event like click, for example. There are other events for example, like onLoad, onMouseOver, onKeyUp. These are just a few examples. Now let me show you how to listen to these events from JavaScript or using JavaScript code. So in my scripts file here I'm gonna declare some variables first. submitbtn, it's gonna be document.getElementByID ('submit'). And then I'm gonna target the container = document, I'm just gonna say query.Selector('container'). Now, I'm gonna get the submitBtn and I'm gonna use the function addEventListener. It looks like this, addEventListener. We're gonna pass in the name of the event that we want to listen to, in our case it's click. And then we're gonna specify what happens when that event is being triggered. We can pass in a function name or we can declare an anonymous function here. So we're gonna say function, we're gonna pass in the event parameter. And then we're gonna say console.log(' Hey, I've been clicked!'). And I'm just gonna escape this character right there. Okay, so now if I click this, we get two different console logs. One is from the OnClick in the HTML and the second one is from the addEventListener from JavaScript. Now, let's see an example of another event, for example, mouse enter. And let's say that when I enter with my mouse cursor in the container area, I want to do something. Do a console log, anything. So I'm gonna say container.addEventListener. We're gonna pass in the event name, in our case, it's mouseenter. And the function name or the function that we want to execute. In my case I'm gonna say mouseEnterContainer. Now, this is a function that I'm gonna create right now. So, function mouseEnterContainer. It does not receive any parameters but instead it does a console log that says, ('Hey, there was a mouseenter event triggered!'). So now, whenever I take my cursor and I enter the boundaries of my container element, I get that console log. You can see by the number here we already have 10 logs. But let's say that I want to do this just once, right? So, do the console log just the first time the event is triggered. Well, to do that, I can simply do the console log and then remove the event listener. So I can say container.removeEventListener('mouseenter and then the name of the function. So the syntax is exactly the same as addeventListener but we changed the name of the function here. So now, I enter the boundaries of the container. I get the console log but I only get it once. All right, let me show you another example real quick for the event keyup, right? So we're gonna say document.addEventListener('keyup, function(event). Now, this is a great way to show you what that event is doing. I will do a console.log(event.keyCode). Now, event is an object that has been transmitted to this function. And you can access various properties for that object, such as keyCode, which is the the code of the key you just pressed. So for example, if I start typing, you'll see that we get various codes. If I do an Enter we get the code 13, if I do escape, I get 27. So, this is a really great way to listen for key presses, to give you an example of what you will be using this for or what you could be using it for. You make a slider an image slider and you would use the right and left arrow keys. You can see their codes pop up just right there, 39 and 37, to switch slides, right? To move between slides. So that's one use for them. But, yeah, basically, that's about it for JavaScript events. Now, you've learned the basics of JavaScript, so it's time to put this knowledge to good use by creating some demos for some of the most common coding patterns in JavaScript. And it will begin in the next lesson with a back to talk button. See you there.