Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Right now all our code executes as soon as the page loads our script file. It runs through it as fast as possible and finishes. But that's not good enough anymore. What I want to be able to do is start to react to some input from the user. And by input, I don't just mean prompting them for their name, but just being able to react to a whole bunch of different things. Does the user clicks somewhere on the screen, does the user resize the window, do they move the mouse? What do they do? What I want to do is start responding to events.
When they leave the form, it's another event. So these events are going on all the time. Your job as a programmer is to say, which ones do I care about? And the way that we can do this is by writing some functions and then saying, instead of just running this function when the page loads, only run it when the user clicks a button or moves their mouse. Now we don't have to keep asking, if the user is pressing their button. The operating system is going to take care of that.
The onblur event happens when I leave a field. Say I'm typing my e-mail address and I click out or hit the Tab key. This event will be called. This is one of the most common ones: myelement.onclick. Now what I've called myelement here? I'm presuming that I've created somewhere using the DOM. I've grabbed hold of it. I have a variable that represents an element on the page, whether that's an h1 or an image or a paragraph. Then I say .onclick and then I have to say, okay, that's the event, so what do I want to do? Well, the typical format is this. We actually create a function here.
And in fact here, we're putting that semicolon not because this is a function, but because the entire line is a statement: myelement.onclick = this function and whatever is inside it. So let me show you an example. I've got an identical two files that I had earlier. A very basic HTML page with a headline which has the ID of mainHeading. And that's my name that I just made up for that section. And then script.js, which I brought over from the previous one.
What this is doing right now is grabbing hold of that headline by using document.getElementById. We're using the DOM here. And right now, it's actually changing that immediately. But I've decided I don't want that to happen immediately. I want to start reacting to events. I only want to call this line if they've clicked the headline. So here's what I'm going to do. I know that the first line of code that's executed grabs hold of the headline and then I'm going to say headline.onclick.
I'm going to set up an event handler for them clicking the headline. Equals, and we're going to write an anonymous function, the word function, opening and closing parentheses, and the opening and closing curly braces. I'm going to put my semicolon in here. It would work without it, but this is the best practice. Now I'm going to grab this line of code that sets the inner HTML, the actual text value of this headline. And I'm going to paste it indented inside this anonymous function.
Change this message one little bit, to "You clicked the headline." I'll save this and I'll open up the webpage that contains it. Now we're finally having code that doesn't immediately run. We're not changing the value of the headline yet. It's going to wait until we click on it. So events are actually happening. When I move the mouse, that's considered an event. If I resize this page, that's considered multiple events. But I didn't say I cared about that.
The only one I care about is the click event on the element called headline, which means the only thing that's going to react to, it's no click events anywhere else on the page. I can all over the page right now. But if I click on the headline, we'll change it. We're now reacting to that. And this is the great thing. With very little code, we're now allowing the page to call back into our script. We've got an event-driven program that's communicating two ways, between our user interface, the visible part of our webpage, and our code behind the scenes.
A simple example here, but it's illustrating a really powerful principle of event-driven programming.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100152 Viewers
56 Video lessons · 113177 Viewers
71 Video lessons · 82035 Viewers
131 Video lessons · 39365 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.