JavaScript HTML DOM EventListener

addEventListener() Method

Example

Trigger a listener event when the user clicks the button:

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

Try it Yourself »

The addEventListener() method is used to add an event handler to a specified element.

Event handlers added with the addEventListener() method do not overwrite existing event handlers.

You can add multiple event handlers to one element.

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

You can add event listeners to any DOM object, not only HTML elements. For example: the window object.

The addEventListener() method makes it easier to control events (bubbling vs capturing).

When using the addEventListener() method, JavaScript is separated from the HTML markup for better readability, and you can add event listeners even when you do not control the HTML markup.

You can use the removeEventListener() method 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 to be called when the event is triggered.

The third parameter is a boolean value that describes whether the event is bubbling or capturing. This parameter is optional.

	Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".

Add an Event Handler to an Element

Example

Alert "Hello World!" when the user clicks an element:

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

Try it Yourself »

You can reference an external function by using its function name:

Example

Alert "Hello World!" when the user clicks an element:

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}

Try it Yourself »

Add Multiple Event Handlers to the Same Element

The addEventListener() 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

The addEventListener() method allows you to add event listeners to HTML DOM objects, such as HTML elements, HTML documents, and the window object. Or other supported event objects like the xmlHttpRequest object.

Example

Add an event listener when the user resizes the window:

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

Try it Yourself »

Passing Parameters

When passing parameter values, use an "anonymous function" to call a function with parameters:

Example

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

Try it Yourself »

Event Bubbling or Event Capturing?

There are two ways of event propagation: bubbling and capturing.

Event propagation defines the order in which element events are triggered. If you insert a <p> element inside a <div> element, and the user clicks the <p> element, which element's "click" event is triggered first?

InBubblingIn bubbling, the event of the inner element is triggered first, and then the outer element is triggered. That is: the click event of the <p> element is triggered first, then the click event of the <div> element.

InCapturingIn capturing, the event of the outer element is triggered first, and then the event of the inner element is triggered. That is: the click event of the <div> element is triggered first, then the click event of the <p> element.

The addEventListener() method can specify the "useCapture" parameter to set the propagation type:

addEventListener(event, function, useCapture);

The default value is false, which means bubbling propagation. When the value is true, the event uses capturing propagation.

Example

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

Try it Yourself »

removeEventListener() Method

The removeEventListener() method removes event handlers added by the addEventListener() method:

Example

element.removeEventListener("mousemove", myFunction);

Try it Yourself »

Browser Support

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

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 and earlier IE versions, and Opera 7.0 and earlier versions, do not support the addEventListener() and removeEventListener() methods. However, for these browser versions, you can use the detachEvent() method to remove event handlers:

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

Example

Cross-browser solution:

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

Try it Yourself »

HTML DOM Event Object Reference

For all HTML DOM events, you can view our completeHTML DOM Event Object Reference。 Other Extensions