JavaScript HTML DOM EventListener

addEventListener() Method

Example

Trigger the listener event when the user clicks the button:

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

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

The event handler added by the addEventListener() method does not override existing event handlers.

You can add multiple event handlers to one element.

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

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

The addEventListener() method allows for easier control of the event (bubbling or capturing).

When using the addEventListener() method, JavaScript is separated from the HTML markup, enhancing readability and allowing for the addition of event listeners without controlling the HTML markup.

You can remove an event listener using the removeEventListener() method.

Syntax

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

The second parameter is the function to be called when the event occurs.

The third parameter is a Boolean value that specifies whether the event should be executed in the bubbling or capturing phase. This parameter is optional.

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

Adding an Event Handler to an Element

Example

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

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

You can refer to an external function by name:

Example

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

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

Adding 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);

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

Example

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

Adding an Event Handler to the Window Object

The addEventListener() method allows you to add event listeners to HTML DOM objects such as HTML elements, the HTML document, the window object, or other objects that support events like the XMLHttpRequest object.

Example

Add an event listener when the user resizes the window:

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

Passing Parameters

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

Example

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

Event Bubbling or Event Capturing?

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

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

In bubbling, the event of the inner element is triggered first, then the outer element, i.e., the <p> element's click event is triggered first, followed by the <div> element's click event.

In capturing, the event of the outer element is triggered first, then the inner element, i.e., the <div> element's click event is triggered first, followed by the <p> element's click event.

The addEventListener() method allows you to specify the propagation type using the "useCapture" parameter:

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

removeEventListener() Method

The removeEventListener() method removes event handlers that have been attached with the addEventListener() method:

Example

element.removeEventListener("mousemove", myFunction);

Browser Support

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

Note: The addEventListener() and removeEventListener() methods are not supported in IE 8 and earlier versions, and in Opera 7.0 and earlier. However, for these browser versions, you can use the detachEvent() method to remove an event handler:

Example

Cross-browser solution:

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

HTML DOM Event Object Reference

For a list of all HTML DOM events, you can refer to our complete HTML DOM Event Object Reference.