JavaScript Introduction | Events | Registering Event Listeners

Event Listener

An event listener is a function responsible for handling an event when that event occurs. It is also called an event handler. When an event of a specified type occurs on a specific element, the web browser runs the event listener registered on that element.

Registering Event Listeners

An event listener can be called only after it has first been registered on the corresponding object or element. There are two ways to register an event listener on an object or element.

1. Register it as a property on the target object or element.
2. Pass the event listener to a method of the object or element.

Registering as a Property on an Object or Element

When registering an event listener as a property on an object or element, you can use the following methods.

1. Register it as a property in JavaScript code.
2. Register it as an attribute in an HTML tag.

Registering as a property in JavaScript code is supported by almost all browsers for most event types. The drawback of this method is that only one event listener can be registered for each event type.

window.onload = function() {                    // This function runs when the HTML document is loaded.
    var text = document.getElementById("text"); // Selects the element whose ID is "text".
    text.innerHTML = "The HTML document has been loaded.";
}

You can also register an event listener as an attribute in an HTML tag, as shown below. The drawback of this method is that JavaScript code is added to HTML code, which reduces readability and makes maintenance harder.

<p onclick="alert('You clicked the text!')">Try clicking this text!</p>

Passing an Event Listener to a Method of an Object or Element

When passing an event listener to a method of an object or element, you can use the following methods.

1. addEventListener()
2. attachEvent()

The addEventListener() method is a method for registering event listeners and is supported by almost all browsers.

The syntax of this method is as follows.

Syntax

targetObject.addEventListener(eventName, eventListenerToRun, eventPropagationMode)

1. Event name: Pass the event type for which the event listener will be registered as a string.
2. Event listener to run: Pass the event listener to run when the specified event occurs.
3. Event propagation mode: If false, the event propagates by bubbling. If true, it propagates by capturing.

var showBtn = document.getElementById("btn"); // Selects the element whose ID is "btn".
showBtn.addEventListener("click", showText);  // Registers a click event listener on the selected element.
function showText() {
    document.getElementById("text").innerHTML = "Ta-da! The text appeared!";
}

When registering an event listener as a property, you use an event type with "on", but with addEventListener() you must use an event type without "on".

Internet Explorer 8 and earlier, and Opera 6 and earlier, do not support addEventListener(), so you must use the similar attachEvent() and detachEvent() methods instead.

Registering Multiple Event Listeners

With the addEventListener() method, you can register multiple event listeners on one object.

var btn = document.getElementById("btn");        // Selects the element whose ID is "btn".
btn.addEventListener("click", clickBtn);         // Registers a click event listener on the selected element.
btn.addEventListener("mouseover", mouseoverBtn); // Registers a mouseover event listener on the selected element.
btn.addEventListener("mouseout", mouseoutBtn);   // Registers a mouseout event listener on the selected element.
function clickBtn() {
    document.getElementById("text").innerHTML = "The button was clicked!";
}
function mouseoverBtn() {
    document.getElementById("text").innerHTML = "The mouse is over the button!";
}
function mouseoutBtn() {
    document.getElementById("text").innerHTML = "The mouse left the button!";
}

Removing Event Listeners

You can use the removeEventListener() method to easily remove a registered event listener.

function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "The event listeners have been removed!";
}