WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript HTML DOM EventListener


The addEventListener() method

Example

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.


Syntax

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

Example

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:

Example

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:

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

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.

Example

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:

Example

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:

Example

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:

Example

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.

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);
element.
detachEvent(event, function);

Example

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.