JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Event Listeners

The latest addition to JavaScript event handlers are event listeners. An event listener watches for an event on an element.

Instead of assigning the event directly to a property on the element, we will use the addEventListener() method.


The addEventListener() method

The addEventListener() method attaches an event handler to the specified element.

We could rewrite our random color example (from previous chapter) to look like this:

Run code

We are still be using the same bgChange() function as before. We attached the addEventListener() method to the button.

addEventListener() takes two mandatory parameters — the event it is to be listening for, and the listener callback function.

This method in a similar way to the event handler properties (previous chapter), but the syntax is obviously different.

Syntax:

element.addEventListener(event, listener, useCapture)

The first parameter is the type of the event (like "click" or "mousemove").

The second parameter is the listener function we want to call when the event occurs.

The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.

Note that you don't use the "on" prefix for the event; use "click" instead of "onclick".


Add an Event Listener to an Element

Note that it is perfectly appropriate to put all the code inside the addEventListener() method, in an anonymous function, like this:

Run code

You can also refer to an external "named" function:

Run code

Add Multiple Event Listeners to the Same Element

At first look, event listeners seem very similar to event handler properties, but they have a few advantages. We can set multiple event listeners on the same element, as demonstrated in the example below:

Run code

We can add events of different types to an element:

Run code

Passing Parameters

When passing parameter values, use an anonymous function that calls the specified function with the parameters:

Run code

Adding Event Listeners to Window Object

Furthermore, you can use addEventListener() on the document and window object.

This example uses the addEventListener() method to attach a click event to the document:

Run code

This example uses the addEventListener() method to attach a resize event to the window:

Run code

Event listeners are currently the most common and preferred way to handle events in JavaScript.


The removeEventListener() method

It is also possible to use the removeEventListener() method to remove one or all events from an element.

Run code

The first parameter is the type of the event (like "click" or "mousemove").

The second parameter is the function we want to call when the event occurs.


See also

JavaScript Reference: HTML DOM Event Object Reference