From (Copyright Refsnes Data)

DHTML Event Handlers

previous next

HTML events can trigger actions in the browser, like starting a JavaScript when a user clicks on an element.

Don't Click On This Text


Turn on the light! How to change an image when the user clicks it.

onmousedown & onmouseup
This time the light is on only when the user holds down the mouse button.

Displays an alert box when the page has finished loading.

Event handlers

An event handler allows you to execute code when an event occurs.

Events are generated by the browser when the user clicks an element, when the page loads, when a form is submitted, etc.


A header changes when the user clicks it:

<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>

Try it yourself

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

<script type="text/javascript">
function changetext(id)
<h1 onclick="changetext(this)">Click on this text</h1>

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
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

More About HTML Events

For a full overview please refer to the complete DOM Event Object Reference in our HTML DOM tutorial.

previous next

From (Copyright Refsnes Data)