To demonstrate JavaScript's event model, we will use alerts. A JavaScript Alert is a method used to display an alert box with a string message and an OK button. However, every place we use an alert, you can also call a JavaScript function to do something more complex. We'll demonstrate this in our first example, the onload event.
In this article we will demonstrate many of JavaScript's events. Here is a complete lest:
onAbort - The user aborts the loading of an image
onBlur - form element loses focus or when a window or frame loses focus.
onChange - select, text, or textarea field loses focus and its value has been modified.
onClick - object on a form is clicked.
onDblClick - user double-clicks a form element or a link.
onDragDrop - user drops an object (e.g. file) onto the browser window.
onError - loading of a document or image causes an error.
onFocus - window, frame, frameset or form element receives focus.
onKeyDown - user depresses a key.
onKeyPress - user presses or holds down a key.
onKeyUp - user releases a key.
onLoad - browser finishes loading a window or all of the frames within a frameset.
onMouseDown - user depresses a mouse button.
onMouseMove - user moves the cursor.
onMouseOut - cursor leaves an area or link.
onMouseOver - cursor moves over an object or area.
onMouseUp - user releases a mouse button.
onMove - user or script moves a window or frame.
onReset - user resets a form.
onResize - user or script resizes a window or frame.
onSelect - user selects some of the text within a text or textarea field.
onSubmit - user submits a form.
onUnload - user exits a document.
OnLoad Event
The onLoad event is triggered each time the page is loaded. One technique to determine how many times a user has visited a page would be to write a cookie to the user's computer.
[load demo] - Remember you can always view the source code of browser-side JavaScript.
KeyPoints
Place the Onload event in the body tag.
Use a function. For example: onLoad="MyFunction();"
Code example #1:
<html>
<head>
<title>JavaScript onload event demo</title>
</head>
<body onload="alert('Demo of JavaScript onload event.');">
This page has JavaScript in the header and uses the OnLoad event.
</body>
</html>
Use JavaScript Identifier You can also specify the language when using an event. It's also a good idea and this is the variation we will use for the rest of this article.
Code Example #2:
<html>
<head>
<title>JavaScript onload event demo</title>
</head>
<body onload="JavaScript:alert('Demo of JavaScript onload event.');">
This page has JavaScript in the header and uses the OnLoad event.
</body>
</html>
Call a Function To do something useful, you usually need to write more then a few lines of code so calling a JavaScript function is more inline with how you will usually use JavaScript. Here is an example:
Code Example #3:
<html>
<head>
<script language="JavaScript">
<!--
function PageStart()
{
alert('Welcome to my page');
}
-->
</script>
</head>
<body onload="PageStart();">
This page has JavaScript in the header and uses the OnLoad event.
</body>
</html>
Use JavaScript Identifier with Functions Too As with code example #2, you can specify JavaScript as follows:
Code Example #4:
<html>
<head>
<script language="JavaScript">
<!--
function PageStart()
{
alert('Welcome to my page');
}
-->
</script>
</head>
<body onload="JavaScript:PageStart();">
This page has JavaScript in the header and uses the OnLoad event.
</body>
</html>
Onclick Event
You can add an OnClick event to almost any visual element of a web page. Common locations include a TD table element and images. For our purposes here, we will use a span tag and make the word ANYTHING display an alert when clicked.
<html>
<body>
<p>The word "ANYTHING" text below displays an alert when you click it.</p>
<p>Almost <span onclick="alert('Demo of JavaScript onclick event.');">ANYTHING</span> can have an OnClick event added to it.</p>
</body>
</html>
What Next?
Now that you've had a simple introduction to the JavaScript event model, let's put that knowledge to work and learn how to validate a form field.
JavaScript
Print This
Tags:
