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.
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions