Javascript Event Handlers

Javascript Event Handlers
Event handlers are a vital tool for web developers, because they allow us to build a script that will run only if and when a specific event occurs. Introduced in HTML 4.0, they add a dynamic element to a website, allowing programs to run in response to your visitors' actions.

Event HandlerTrigger
onabortVisitor cancels a loading image
onblurAn element loses focus (e.g. visitor clicks out of a form field)
onchangeVisitor changes the content of a field
onclickVisitor clicks an object with the mouse cursor
ondblclickVisitor double-clicks an object
onerrorAn error occurs when loading a document or an image
onfocusAn element gets focus (e.g. visitor clicks on or tabs into a form field)
onkeydownVisitor presses a key
onkeypressVisitor presses or holds down a key
onkeyupVisitor releases a key
onloadA page or an image finishes loading
onmousedownVisitor presses the mouse button
onmousemoveVisitor moves the mouse
onmouseoutVisitor moves the mouse cursor off an element
onmouseoverVisitor moves the mouse cursor onto an element
onmouseupVisitor releases the mouse button
onresetVisitor clicks the Reset button of a form
onresizeVisitor resizes the frame or window
onselectVisitor selects a portion of text
onsubmitVisitor clicks the Submit button of a form
onunloadVisitor exits the page

You can insert event handlers directly into HTML tags, like this...

<input type="button" value="Click me!" onclick="alert('You clicked the button!')">

... which will produce the following effect:

This site needs an editor - click to learn more!

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.