Lessons: 8Length: 52 minutes
- Overview
- Transcript
2.1 Using HTML Attribute Event Handlers
The very first events we'll use are set up using HTML attributes. You'll learn what they are and how to set them up in this lesson.
2.1 Using HTML Attribute Event Handlers
When you start learning about events, it's important to start at the beginning with what are technically called DOM Level 0 events. Now, that's a mouthful to say. But there is a very good technical reason why they are called that. They existed before there was any DOM specification. So if you look at the DOM specs, you would see that they start with Level 1 and Level 2, and then they go on from there. DOM Level 0 implies that these events existed before there was any DOM specification, and that is indeed the case. But if you don't wanna call them DOM Level 0 events, you could call them attribute events, or HTML attribute events, or something along those lines. Because that's essentially how we set these events up. So let's, first of all, talk about what an event is. It's really nothing more than something that takes place in the browser. And there's a wide variety of things that can happen. For example, let's create a div element that is going to contain a list of tabs. So we're going to a create tab control so that whenever we click on the individual tabs, it's going to change the content that's being displayed. So let's give this a CSS class of tab-buttons, so this would be a container element. Then we would have a div that has a class of tab-button. So we have our container, then we have our individual button. And let's go ahead and have three of these, we'll have File, Edit, and Help. So as far as the text is concerned, it's more like a menu than a tab. But well, who cares? Okay, so when it comes to the browser, the user has several different means of interacting with this web page. So they can move their mouse over anything, they can hover it over one of these different div elements, they can click on it. Now, all of these things are actual events that occur that we can listen for and handle. Now, I use some terminology there that is used when talking about events. There are events that we listen for, those are things that occur either because the user did something or perhaps the browser did something. It doesn't have to be user-oriented. And then there's handle, so we listen for an event and then we handle that event with JavaScript code. And we typically just refer to that as the handler. So we are listening or events and we are handling those events. And I want to stress that there is a difference between the two, because it can get a little confusing. So essentially we set up something that is listening for the event, and we handle that event. In this case, we want to essentially listen for the user to click on these individual div elements. And we do that with a DOM Level 0 event listener called onclick. So we have this onclick, and the wording is a little funny, onclick. Well, that's just how it is. The idea is on a click, then do something. And then the value of this attribute is JavaScript code that it's going to execute. So if we wanted to alert a message when the user clicks on this file, then that's all we have to do. We use that onclick attribute, we set it to execute the alert function, passing in a message. And that's exactly what happens, just like that. Of course, that's not very useful. So we, of course, want to make this a little bit better for our use case. So if we can execute any JavaScript code, then it kinda goes without saying that we could execute a function. So we could write a function called activateButton, and then we could also pass in a value. So this is the file button, so we could just pass in File. And let's go ahead and define that function. So we will have the activateButton, it's going to accept the buttonText, I guess we could call that. And then we could simply alert, You clicked the, and then we will concatenate the buttonText and then button. So it's still not very useful, but at least we're getting to the point to where we're actually reacting to the user's actions within our web page. So we have File, Edit, Help. So now if we go back and we click on File, You clicked the file button. If we click on Edit, You clicked on the edit button. And of course, if we click on Help, you clicked the help button. Now, I want to point out that events always happen, they're always occurring within a web page. Anytime you move your mouse, there are events that are occurring. Anytime you click, that's an event. Anytime you press a key on your keyboard, even if there are no form fields, those are events that are occurring in the browser. And the only reason why we don't see something happen is because aren't specifically looking for it. For example, if we take off the onclick attribute for Help and we click on Help, of course, we don't see anything happen. But the click event is still occurring there, it's just that we aren't listening for it and reacting to it. So just because we don't have an event set up for a particular element that doesn't mean it's not accepting or receiving an event. It just means that we aren't listening for it. And anytime an event occurs, we get an object that contains all of the information about that event. And we will look at that in the next lesson.
