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