DHTML Event Handlers

You can perform an operation on an element when an event occurs through an event handler.

Example

Note:Most DHTML examples require IE 4.0+、Netscape 7+ or Opera 7+!

onmouseover and onmouseout
How to change the color of an element when the mouse pointer moves over it and moves away from it.
onclick
How to change an image when you click on an image and then change it back to the original image when you click on it again.
onmousedown and onmouseup
This time, the light will only turn on when you hold down the mouse button.
onload
Display a prompt box when the page is fully loaded.

Event handler

You can perform an operation on an element when an event occurs: when a user clicks an element, when the page loads, when a form is submitted, etc.

<h1 onclick="style.color='red'">Click on this text</h1>

The above example defines that when a user clicks on a title, the title turns red.

You can also add a script in the page's head section and then call the function from an event handler:

<html>
<head>
<script type="text/javascript">
function changecolor()
{
document.getElementById('header').style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()">Click on this text</h1>
</body>
</html>

HTML 4.0 Event Handlers

Event When...
onabort User aborts the page loading.
onblur User leaves the object.
onchange User changes the value of the object.
onclick User clicks the object.
ondblclick User double-clicks the object.
onfocus User activates the object.
onkeydown Keyboard is pressed.
onkeypress Keyboard is pressed.
onkeyup Keyboard is released.
onload

Page has been fully loaded.

Note:In Netscape, this event occurs when the page is loaded.
onmousedown User presses the mouse button.
onmousemove Mouse pointer moves over the object.
onmouseover Mouse pointer moves onto the object.
onmouseout Mouse pointer moves out of the object.
onmouseup User releases the mouse button.
onreset User resets the form.
onselect User selects content on the page.
onsubmit User submits a form.
onunload User closes the page.