JavaScript HTML DOM EventListener

The addEventListener() method


The listen event is triggered 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 the specified element.

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

You can add multiple event handlers to an 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 just HTML elements. Such as: the window object.

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

When you use the addEventListener () method, JavaScript is separated from the HTML tags and is more readable. You can also add event listeners without controlling the HTML tags.

You can use the removeEventListener () method to remove event listeners.


element.addEventListener(event, function, useCapture);

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

The second parameter is the function to be called after the event fires.

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


Hello World!" Pops up when the user clicks on the element:

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

You can use function names to reference external functions:


Alert "Hello World!" when the client taps on an element:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
Try it yourself »

Add Many Event Handlers to the Same Element

The addEventListener () method allows adding multiple events to the same element without overwriting existing events:


element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Try it yourself »

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


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

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, window objects. Or other event objects such as: xmlHttpRequest object.


Add event listeners when the user resets the window size:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
Try it yourself »

Passing Parameters

When passing parameter values, use "anonymous functions" to call functions with parameters:


element.addEventListener("click", function(){ myFunction(p1, p2); });
Try it yourself »

Event Bubbling or Event Capturing?

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

Event delivery defines the order in which element events are fired. If you will <p> Element inserted into <div> Element, user clicks <p> Element, which element's "click" event is triggered first?

In bubbling , events of internal elements are triggered first, and then external elements are triggered, that is: <p> Element's click event fires first and then fires <div> The click event of the element.

In Capture , events for external elements are triggered before events for internal elements are triggered, that is: <div> Element's click event fires first Before triggering<p> The click event of the element.

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


document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, genuine);
Try it yourself »

The removeEventListener() method

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


element.removeEventListener("mousemove", myFunction);
Try it yourself »

Browser Support

The numbers in the table indicate the version number of the first browser that supports this 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, Opera 7.0 and earlier do not support the addEventListener () and removeEventListener () methods. However, for these browser versions, you can use the detachEvent () method to remove the event handler:

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


Cross-program 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 x.attachEvent ("onclick", myFunction); }
Try it yourself »

HTML DOM Event Object Reference

For all HTML DOM events, check out our full HTML DOM Event Object Reference.