Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
But we are not going to do any more code like this. We are going to do it properly. So I am going to jump across into my script.js, which is already being linked to, but there's no script in it yet. Now it's easy to think that we need a button or a link to click on. We can support the idea of clicking on anything in our document. Click is a very generic event. And we mentioned that we need to write element.event, so what's an element? Well, one of the top-level ones I have here is document. The document is an element itself. document., and event name, I'll say onclick =, and this is where we then write what's called the anonymous function.
This isn't the only way of doing it here, but this is the most common way. So the word function, opening and closing parentheses, and opening and closing curly braces that contain whatever code I want to execute. In this case, I am going to do something simple, alert ("You clicked somewhere in the document"). So I jump over to the browser, I reload the page, and as soon as I clicked, I should get that alert message. The only thing I have to be careful with would be clicking on perhaps one of these links, which actually won't go anywhere right now and get a missing page.
But you can see I don't have to click explicitly on a button; it can react to it anywhere. Now it's probably not all that useful to make the entire document respond to clicking. So what we could do instead, I am going to jump over and do a slightly different one here. First, I'm going to create a variable.
First, I am going to create a variable and just grab hold of an image which has the ID of main image, because if I want to respond to an event, I don't have to respond at the document level. I don't have to say document.onclick. I can use any element.onclick. So now I got that image, I could say myImage.onclick = another anonymous function, and we'll pop up in the message, You clicked the image.
Save that, jump back over into the browser, and refresh this page. Now if I click the image, I should get the message, "You've clicked the image," though having said that, this is also considered a document click, so I'll get that other event as well. If I click somewhere off the image, I'll just get "You've clicked somewhere in the document," but it can also target the image, which again, has the document as well. So you can target this event handling at any level that you want to.
I am going to emulate this by just doing a little trick here. I am going to grab the script tag and just put it up here somewhere in the head of the document. So it's going to be loaded as soon as the browser sees Line 7, before it even gets onto the body here. I am going to jump over into script.js. I am just going to remove that document.onclick function, because I don't really need it here. I just want one responding. So still I have that code to say when you click the image pop up an alert box.
And it's this that can tell us when everything is loaded. I use the same format, the.event format here, and I'll just do an anonymous function. So call any other functions, "prep anything we need to." In fact, a good idea here is that what I might do is create a new named function. Let's imagine that we had multiple event handlers that we were worried about.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99339 Viewers
56 Video lessons · 112598 Viewers
71 Video lessons · 81418 Viewers
131 Video lessons · 39086 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.