JavaScript HTML DOM Event Listener

addEventListener() method

Example

Add an event listener that triggers when the user clicks the button:

document.getElementById("myBtn").addEventListener("click", displayDate);

Try It Yourself

addEventListener() The method adds an event handler for a specified element.

addEventListener() The method adds an event handler to an element without overwriting existing event handlers.

You can add multiple event handlers to an element.

You can add multiple event handlers of the same type to an element, such as two "click" events.

You can add event handlers to any DOM object, not just HTML elements, such as the window object.

addEventListener() method makes it easier to control how events react to bubbling.

When using addEventListener() method to separate JavaScript from HTML markup, achieving better readability; even when not controlling HTML markup, you can add event listeners.

You can use removeEventListener() This method makes it easy to remove event listeners.

Syntax

element.addEventListener(event, function, useCapture);

The first parameter is the type of the event (such as "click" or "mousedown").

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

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

Note:Do not use the "on" prefix for events; use "click" instead of "onclick".

Add an event handler to an element

Example

Prompt "Hello World!" when the user clicks on an element:

element.addEventListener("click", function(){ alert("Hello World!"); });

Try It Yourself

You can also refer to external "named" functions:

Example

Prompt "Hello World!" when the user clicks on an element:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Try It Yourself

Add multiple event handlers to the same element

addEventListener() This method allows you to add multiple events to the same element without overwriting existing events:

Example

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Try It Yourself

You can add different types of events to the same element:

Example

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Try It Yourself

Add an event handler to the Window object

addEventListener() Allows you to add an event listener to any HTML DOM object, such as HTML elements, HTML objects, window objects, or other objects that support events, such as xmlHttpRequest objects.

Example

Add an event listener that is triggered when the user adjusts the window size:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Try It Yourself

Pass parameters

When passing parameter values, use the 'anonymous function' in the form of parameters to call the specified function:

Example

element.addEventListener("click", function(){ myFunction(p1, p2); });

Try It Yourself

Event bubbling or event capturing?

There are two methods of event propagation in HTML DOM: bubbling and capturing.

Event propagation is a method to define the order of elements when an event occurs. If there is a <p> element inside a <div>, and the user clicks on this <p> element, which element's 'click' event should be handled first?

In bubbling, the event of the innermost element is handled first, followed by the outer ones: first handle the click event of the <p> element, then the click event of the <div> element.

In capturing, the event of the outermost element is handled first, followed by the inner ones: first handle the click event of the <div> element, then the click event of the <p> element.

In the addEventListener() method, you can specify the propagation type by using the 'useCapture' parameter:

addEventListener(event, function, useCapture);

The default value is false, it will use bubble propagation, if the value is set to trueIf this value is set to

Example

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Try It Yourself

removeEventListener() method

removeEventListener() The method will remove the event handler that has been added through addEventListener() Event handlers attached to the method:

Example

element.removeEventListener("mousemove", myFunction());

Try It Yourself

Browser Support

The numbers in the table specify the first browser version that fully supports these methods.

Method
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Note:IE 8, Opera 6.0 and earlier versions do not support addEventListener() and removeEventListener() Method. However, for these special browser versions, you can use attachEvent() Method to add an event handler to an element and by detachEvent() Method to delete:

element.attachEvent(event, function);
element.detachEvent(event, function);

Example

Cross-Browser Solution:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For mainstream browsers, except IE 8 and earlier versions
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}

Try It Yourself

HTML DOM Event Object Reference Manual

For a complete list of all HTML DOM events, please visit our full HTML DOM Event Object Reference Manual.