HOME

DHTML Tutorial
DHTML HOME
DHTML Intro
DHTML CSS
DHTML DOM
DHTML Events
DHTML Summary

DHTML DOM
DOM Reference

DHTML Examples
DHTML Examples
DOM Examples

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

DHTML Event Handlers

With an event handler you can do something with an element when an event occurs.

Examples

Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+!

onmouseover & onmouseout
How to change the color of an element when the cursor moves over and out of an element.

onclick
Turn on the light! How you can change an image when you click on it, and back to the original image when you click on it again.

onmousedown & onmouseup
This time the light is on only when you hold the mouse button down.

onload
Displays an alert box when the page has finished loading.

Event handlers

With an event handler you can do something with an element when an event occurs: when the 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 example above defines a header that turns red when a user clicks on it.

You can also add a script in the head section of the page and then call the function from the 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	Occurs when...
onabort	a user aborts page loading
onblur	a user leaves an object
onchange	a user changes the value of an object
onclick	a user clicks on an object
ondblclick	a user double-clicks on an object
onfocus	a user makes an object active
onkeydown	a keyboard key is on its way down
onkeypress	a keyboard key is pressed
onkeyup	a keyboard key is released
onload	a page is finished loading. Note: In Netscape this event occurs during the loading of a page!
onmousedown	a user presses a mouse-button
onmousemove	a cursor moves on an object
onmouseover	a cursor moves over an object
onmouseout	a cursor moves off an object
onmouseup	a user releases a mouse-button
onreset	a user resets a form
onselect	a user selects content on a page
onsubmit	a user submits a form
onunload	a user closes a page

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

W3Schools was converted to XHTML in December 1999