Previously, we've had to rely upon JavaScript's standard methods, especially the prompt() method, to gain information from the user. Forms, on the other hand, place graphical components directly on a Web page for use with JavaScripts. With this new method of user interaction comes a new model of programming -- event-driven programming.

In event-driven programming, an event is generated when something happens. For example, a user may press a button, which then generates a 'click' event. To trap events in JavaScript, an event handler is placed inside the HTML tag that defines the object. That event handler can then execute program instructions, or make a function call. For example, to create a button that calls the buttonFunction() when it is clicked, you would use the following code:

<input type="button" onclick="buttonFunction()">

This code creates a button and adds an event handler (onclick) in the object's tag. The event handler is followed by an equals sign and the appropriate statements enclosed in double quotation marks. Although event handlers can execute several statements (separated by semicolons), your code will be easier to understand if you make a call to a function inside the event handler. However, the following code would be perfectly legal:

<input type="button" onclick="if(prompt('Do you realise that you just pressed a button?') alert('Just checking!'); else alert('You really should be more careful!');">

The following is a list of the most commonly used event handlers in JavaScript, and a brief description of when they are generated:

• blur The blur event is generated when an object loses focus, that is, after an object has been selected and then deselected by the user clicking outside the object's area.
• click The click event is generated when the user clicks on a clickable object, such as a button object.
• change A change event is generated when the value of an object, such as the text inside a text field, changes.
• load Unlike most events that are generated as a response to user activity, the load event is generated by the browser when a document has completed loading.
• mouseover Mouseovers are generated when the user positions the mouse over an object, such as a hypertext link.
• select A select event is very similar to a click event, except that it is generated by selectable objects, such as a checkbox.
• submit Submit events are generated when the user clicks the submit button, or when a submit function is called.
• unload The unload event is the opposite of load event. The unload event is generated by the browser just before the document is unloaded, usually when a user leaves a page.

Details on which events are generated by which objects are included with a description of each form object in this lesson's examples. For now, just familiarise yourself with JavaScript's events.