Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So window.onload means the onload event of the window object; nameField.onblur means the onblur event of the nameField object; or quite classically, just myelement.onclick. When they click a DOM element, we want to do something, so we use the equal sign and then this following format: the word function(), and then the opening and closing curly braces, and then you put your event handler code inside here, whatever you want to execute when they click that element, whether that's one line or a hundred.
That's why the semicolon goes at the end of the block here. The same way I put a semicolon at the end of var a = 5, I put it at the end of myelement.onclick = function(). In most cases, it would work if you forgot the semicolon, but you will see this format a lot. And then there's the third method of deciding to handle or register for an event. This has one huge benefit and one huge drawback. It's using a method called addEventListener, which you can either call directly on the document object or on any element that you have.
And you give it three pieces of information: the event--and here you actually write it without the word on, so click rather than onclick, mouseover rather than onmouseover-- then a comma, then the function you want to run, and then the term false. We're actually interested in the first two arguments here. What event are we listening for and what function gets called when it happens? This third false argument is an option for some super-advanced event handling that's very unusual to need. Now the big benefit is using this way you can actually add a listener to multiple events. You can add one event and have multiple listeners.
You have a lot of flexibility to dynamically add and use its mirror image to remove event listeners as your script is running. If that's the big benefit, here's the big problem. This is one of the very few areas left where there is still a difference between the browsers. Because Internet Explorer, prior to IE 9, does not have the addEventListener function. It has its equivalent which is the attachEvent method, which takes two parameters. Same idea; it's the event name itself and then the function.
It's the same concept, but it's a different name. And that's a small difference that makes a big difference because to use this we now need to write code to detect whether or not these functions exist. And if I wanted to be agnostic about the browser, what I'd probably typically do is write my own little helper method. I'd write my own function called say addCrossBrowserEventListener, and I could pass it information. And it would do a little bit of scanning to see, does the EventListener function exist? If it does, we'll use the addEventListener function; if it doesn't, we'll use the attachEvent one.
Because of this reason, in this course I'm going to be using the simpler, more straightforward, but cross-browser compatible methods of creating event handlers.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105512 Viewers
56 Video lessons · 117171 Viewers
71 Video lessons · 86406 Viewers
131 Video lessons · 41306 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.