Web Development Tutorials


JavaScript Event and Handlers

Events are the foundation for building interactive JavaScript web pages. An event in JavaScript is something that happens with or on the webpage. Events can be a result of a user action or a browser action. Some examples of events include:

  • A mouse click (user action)
  • The webpage loading (browser action)
  • Mousing over a hot spot on the webpage, also known as hovering (user action)
  • Selecting an input box in an HTML form (user action)
  • A keystroke (user action)
  • Form submission

One of the ways in which JavaScript is executed is through events. An event is an action that can be detected by JavaScript such as an action preformed by a user or an action performed by the Web browser. A page may contain several JavaScript functions, but until the function is called or invoked, the function remains inactive. Functions are called as a result of an event. Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onclick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

When an event occurs, JavaScript executes the code that responds to that particular event. The code that executes in response to an event is called an event handler. Event handler names are the same as the name of the event itself, plus the addition of the "on" prefix. The table below lists common JavaScript events along with the associated event handler and when the event is triggered.

Event Handler Event Triggered When
onblur blur An element, such as a text box, becomes inactive
onclick click An element is clicked once
ondblclick double click An element is clicked twice
onchange change The value of an element, such as a text box, changes
onerror error An error occurs when a document is loading
onkeyup key up An element, such as a text box, becomes active
onkeydown key down An element, such as a text box, becomes active
onkeypress key press An element, such as a text box, becomes active
onfocus focus An element, such as a text box, becomes active
onload load A document loads
onmouseout mouse out The mouse moves off an element
onmouseover mouse over The mouse moves over an element
onreset reset A form's fields are reset to their default values
onselect select A user selects a form field
onsubmit submit A user submits a form
onunload unload A document unloads

In the example below, when the button is clicked, the click event triggers the "onclick" event handler that calls a JavaScript function.

First, the HTML page contains a button that has the id "MyBtn":

<input type="button" value="Click Me" onclick="alert('You clicked the button');" />

Next, the JavaScript page creates a reference to the button. When the button's click event is triggered, the alert() method is called and displays the output message.

window.onload = init;

function init() {
  var clickButton = document.getElementById("myBtn");
  clickButton.onclick = alert('You clicked the button');

In the next example, image tags contain the "onmouseover" event handler. When the mouse moves over an image, the alert() method is executed, displaying an alert window that displays the name of the browser associated with the icon.

The HTML page contains the broswer images with unique ID values.

<img src="/js/chp2/img/firefox.gif" id="firefox" />
<img src="/js/chp2/img/ie.gif" id="IE" alt="internet explorer" />
<img src="/js/chp2/img/opera.gif" id="OP" alt="opera" />
<img src="/js/chp2/img/safari.gif" id="SF" alt="safari" />

The JavaScript page contains the script to capture the mouseover event for each of the browser images.

window.onload = init;

function init() {
  var fireFox = document.getElementById("FF");
  var internetExplorer = document.getElementById("IE");
  var opera = document.getElementById("OP");
  var safari = document.getElementById("SF");

  fireFox.onmouseover = alert('You have selected Firefox!');
  internetExplorer.onmouseover = alert('You have selected Internet Explorer!');
  opera.onmouseover = alert('You have selected Opera!');
  safari.onmouseover = alert('You have selected Safari!');

The events that are available to element vary. For example, while an input button can respond to a click event, it does not respond to the reset event. The events associated with common HTML elements are listed in the JavaScript reference section of this tutorial.

TOP | NEXT: Chapter 3 - Basic Input and Output