JavaScript Events

Tuesday, April 17, 2012

There has been a lot of progress made with regard to events since the introduction of JavaScript. An event is something that triggers a specific action to occur within the web browser. There are a variety of events that can occur, but typical JavaScript events include scenarios where a user loads a page or clicks on a button. Other popular events include other tasks such as with the mouse or keyboard. In this article, we will cover some of the most common JavaScript events that can be used in your JavaScript code that can be used to interact with your users.


A classic example of a JavaScript event is the onload event. The onload event is triggered when the element has loaded, typically the body, iframe, or image elements in the document. The onload event is generally used to provide the user with a welcome message, or check the browser type, version, so that you can load the appropriate version of the web page based on the information you collected.

  <script type="text/javascript">
    function loadPage() {
        alert("The page has been loaded.");

<body onload="loadPage()">
  <p>Welcome to my page!</p>

While not all events are supported across all browsers, here is a short list of events that should be supported by modern browsers.

HTML Event AttributeDescriptionType
onblurTriggers when an element loses focus.Event
onchangeTriggers when the selection, the checked state, or the contents of an element have changed. Event
onclickTriggers when the user clicks on an element.MouseEvent
ondblclickTriggers when the user double clicks an element.MouseEvent
onerrorTriggers when an error occurs during loading of external file.Event
onfocusTriggers when an element receives focus.Event
onkeydownTriggers when an element has focus and a key is pressed down.KeyboardEvent
onkeypressTriggers when an element has focus and a key is pressed down.KeyboardEvent
onkeyupTriggers when the element has focus and the key is released.KeyboardEvent
onloadTriggers when an object/element has been loaded.Event
onmousedownTriggers when the user presses a mouse button over an element.MouseEvent
onmousemoveTriggers when a user moves the mouse over an element.MouseEvent
onmouseoutTriggers when a user moves the mouse pointer out of the element.MouseEvent
onmouseoverTriggers when a user moves the mouse pointing into the element.MouseEvent
onmouseupTriggers when a user releases a mouse button over an element.MouseEvent
onreadystatechangeTriggers when the state of a request changes.Event
onresetTriggers on a form before it is reset.Event
onresizeTriggers when the size of an object has changed.Event
onscrollTriggers when the contents of an element have been scrolled.Event
onselectTriggers when text has been selected in an element.Event
onsubmitTriggers when the user clicks on a submit button within a form.Event
onunloadTriggers before the browser unloads the document.Event

We will be covering these events and others in more detail in the upcoming articles.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor Murachs JavaScript and DOM Scripting JavaScript and jQuery: The Missing Manual