Programming Tutorials

Handling Events in JavaScript

By: aathishankaran in JavaScript Tutorials on 2007-03-27  

JavaScript programs are typically event-driven. Events are actions that occur on the Web page, usually as a result of something the user does, although not always. For example, a button click is an event, as is giving focus to a form element; resizing the page is an event, as is submitting a form. It is these events, which cause JavaScript programs to spring into action. For example, if you move your mouse over this phrase, a message will pop-up, courtesy of JavaScript. 

An event, then, is the action, which triggers an event handler. The event handler specifies which JavaScript code to execute. Often, event handlers are placed within the HTML tag, which creates the object on which the event acts: 

<tag attributel attribute2 onEventName="javascript code;"> 

For example, a hyperlink is subject to a MouseOver event, meaning that its event handler will be triggered when the mouse passes over the link. Therefore, you place the event handler for a hyperlink's MouseOver inside the A tag: 

<a href="" onMouseOver="popupFunc() ;">

The JavaScript which is called by the event handler may be any valid JavaScript code: a single statement or a series of statements, although most often it is a function call. 

The set of all events, which may occur, and the particular page elements on which they can occur, is part of the Document Object Model (DOM), and not JavaScript itself. As a result, Netscape and Microsoft do not share the exact same set of events, nor are all page elements subject to the same events between browsers. For example, Internet Explorer4 supports a MouseOver event for an image while Navigator 4 does not. 

The table below illustrates some of the most commonly used events supported in both DOM's. Because the DOM's differ in their event support, the following documents are recommended as an overview of each browser's event support: 

Common Events 

Here's an example of how to create an event handler in JavaScript:

HTML

<button id="myButton">Click me</button>

JavaScript

// Get a reference to the button element
const button = document.getElementById('myButton');

// Attach an event listener to the button element
button.addEventListener('click', function(event) {
  // Do something when the button is clicked
  console.log('Button clicked!');
});

In this example, we first get a reference to the button element using the getElementById method. We then attach an event listener to the button using the addEventListener method. This method takes two arguments: the type of event we want to listen for (in this case, a click event), and the function we want to execute when the event occurs.

When the user clicks the button, the function passed as the second argument to addEventListener will be executed. In this case, we're just logging a message to the console, but we could also perform more complex actions, such as updating the page content or making an AJAX request to the server.

Event handlers can also be defined inline, like this:

<button onclick="alert('Button clicked!')">Click me</button>

In this case, the onclick attribute is used to define the event handler inline. When the button is clicked, an alert dialog will be displayed with the message "Button clicked!".

Note that it's generally considered better practice to define event handlers using the addEventListener method rather than inline, as this separates the JavaScript code from the HTML markup and makes it easier to maintain and debug.