Javascript is an event-driven programming language. That means you can write Javascript code that respond to specific events such as button click, drop list change, etc. These events are sometime referred to as "DOM events".
You can see a list of such "DOM Events" on Wikipedia.
These DOM events can be categorized as mouse events, keyboard events, HTML object events, form event, and other categories.
Some common mouse events are ...
onclick event - fires when mouse is clicked
onmousedown event - fires when mouse button is depressed
onmouseup event - fires when mouse button is released
onmouseover event - fires when mouse is moved over an HTML element
Some common key events are ...
onkeydown event - fires when a key on the keyboard is depressed
onkeyup event - fires when a key on the keyboard is released
onkeypress event - fires right after the keydown event
Some common HTML events are ...
onload event - fires when browser finishes loading all content on page
onresize event - fires when browser is resized
Some common form events are ...
onsubmit event - fires when a form is submitted
onchange event - fires when user changes a form value
onfocus event - fires when a form element receives focus
The SitePoint tutorial contains an example of using onSubmit to verify form.
A common error is to try to run Javascript code that performs actions on some page element when the page has not completed loading yet. If the page has not completed loading and you ask Javascript to act on the element, Javascript will not be able to find the element and gives an error.
The browser triggers the load event to indicate that all elements have been loaded. Hence it is very common to attach Javascript to the load event that will initialize a Javascript program or run initialization code.
The submit event happens when a user submits a form. Hence it is the perfect event to tie form validation code to. This is the code that would check if the user had filled in all the form fields or check the format in which the user had entered their email address or date.
As described in JavscriptKit tutorial, there are two "traditional" ways to attach Javascript code to event.
The first method known as the "attribute" method is to add attributes to the HTML element. The second method is known as the "scriting method" is to have a Javascript code block with Javascript code. That Javascript code defines functions and then attaches those functions to specific Javascript events.
The first "attribute method" is the oldest method. It is also known as "inline event handler" because the event triggering code is placed inside the HTML element tag in the form of an attribute. Some examples of inline event handler is shown in the tutorials ...
IntranetJournal.com
ChipChapin.com
Although, okay to start with this method when first learning, this is not considered good practice because it mixes presentation (HTML tags) with logic (the Javascript code).
Then came the "scripting method". This is better because it provides a better separation between presentation and logic. The code is all within the script block. And the HTML tag is not adorned with extra code.
Nevertheless, both method are labeled as "traditional" methods because they are old and newer methods are now more commonly used.
The newer methods of attaching Javascript code to DOM events is to use event handlers. Event handling involves using the Javascript addEventListener function and/or the attachEvent function. Well, which one to use? You use the addEventListener for Firefox-type browsers, and you use the attachEvent for Internet Explorer browsers.
For a specific HTML element, you want to associate an event and a function that is to be run when that event is triggered. That is the job of the addEventListener and the attachEvent functions. As arguments they must accept an event and function to run.
For syntax and example code of how to call these two functions, see some of these tutorials ...
JavascriptKit.com tutorial
QuirksMode - (This tutorial also shows the use of an anonymous function)
AddEventListener tutorial by Mozilla
AttachEvent Method by Microsoft
In the case of addEventListener, it takes a third boolean argument of true or false. True will indicate that that event handler be executed in the capturing phase. And false will indicate that the event handler be executed in the bubbling phase. If in doubt, go with false.
To understand what is meant by capturing phase versus bubbling phase, you will need to understand the DOM event flow in the following tutorials...
JavascriptKit.com
QuirksMode.org
In most cases, you want your Javascript code to work in both Firefox-like browser and Internet Explorer browsers. So you will need to use both the addEventListener and the attachEvent functions to attach event. A first thought might be to use "browser detection" to detect what browser the user is using and then run the appropriate function. But that would be wrong. Best practice is to use "capability detection" or "object detection" to detect if a browser can run a particular function or has a particular object. And if so, then use that function or object. And if not use the other function.
As noted in Wikipedia, best practices indicates the use of capability detection as opposed to browser detection.
Quirksmode which says never use browser detection and to use object detection instead.
Mozilla article
says "Improper browser detection can lead to web maintenance nightmares" and "Detecting browsers using this level of detail is unworkable, unmaintainable and violates the basic principles of web authoring! I strongly advise everyone to avoid this trap."
YourHTMLSource.com says "browser detection is patchy now, and can only dis-improve over time as new browsers appear. On the other hand, object detection works every time."
JavascriptKit.com shows how you can use object to detect the various browsers.
Object Detection in the New Browser Age
Needless to say, the use of attachEvent and addEventListener is better than the traditional inline attribute method because it provide separation between presentation and logic. This is what is known as "unobtrusive Javscript" -- where Javascript code does not mix into the HTML tags.
More about Unobtrusive Javascript in these tutorials ...
Wikipedia explains the general concept behind unobtrusive Javascript.
AListApart explains Behavioral Separation in Javascript. (It got on interesting cartoon on the top of the tutorial as well)
Sitepoint explains how to get Dreamweaver CS4 to generate unobtrusive Javascript.
To see a fuller example that does something useful with event handling, take a look at
JavascriptKit.com example of a context menu on right-click
