DHTML Event Handlers

Examples

Note: Most of the DHTML examples require Internet Explorer 4.0 or higher.

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 event handlers you can change all the elements whenever you want: when the user clicks an element, when the page loads, when a form is submitted, and more, but you need help from JavaScript, a small line of code in the value of the event handler.

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

This makes a header which turns red when a user clicks on it.

Or you can write the script as a function and place it in the head section of the page, then you have to call the function from the event handler:

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

This method is preferred if you have many lines of code to be executed.

HTML 4.0 Event Handlers

Event	What it handles
onabort	User aborted page loading
onblur	User left the object
onchange	User changed the value of an object
onclick	User clicked on an object
ondblclick	User double clicked an object
onfocus	User made an object active
onkeydown	When a keyboard key is on its way down
onkeypress	When a keyboard key is pressed
onkeyup	When a keyboard key is released
onload	Page finished loading
onmousedown	User pressed a mouse-button
onmousemove	Cursor moving on an object
onmouseover	Cursor moved over an object
onmouseout	Cursor moved off an object
onmouseup	User released a pressed mouse-button
onreset	User resets a form
onselect	User selected content of a page
onsubmit	User submitted a form
onunload	User left window

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

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

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

How we converted to XHTML

Active Server Pages Resource Web Site

Your own Web Site?

Read W3Schools
Hosting Tutorial

ASP Hosting
ASP.net Hosting
Web Hosting

$15 Domain Name
Registration
Save $20 / year!

Advertise
at W3Schools

Only 0.5 CPM

SELECTED LINKS

Books Online

Web Software

The Future of
Web Development

Jobs and Careers

Web Security
Web Statistics
Web Standards

PARTNERS

W3Schools
TopXML
VisualBuilder
XMLPitstop
DevelopersDex
DevGuru
Programmers Heaven
The Code Project
Tek Tips Forum
ZVON.ORG
TopXML Search