DOM EventListener


JavaScript HTML DOM EventListener


addEventListener() method

Example

The listener event is triggered when the user clicks the button:

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

 Try It! 

The addEventListener() method is used to add event handlers to the specified element.

The event handler added by the addEventListener() method will not overwrite the existing event handler.

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: window object.

The addEventListener() method makes it easier to control events (bubble and capture).

When you use the addEventListener() method, the JavaScript is separated from the HTML markup, making it more readable, and you can add event listeners even when there is no control over the HTML markup.

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


Grammar

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 is triggered.

The third parameter is a Boolean value used to describe whether the event is bubbling or captured. This parameter is optional.

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

Add event handler to the original element

Example

When the user clicks on the element, "Hello World!" pops up:

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

 Try It! 

You can use function names to refer to external functions:

Example

When the user clicks on the element, "Hello World!" pops up:

element.addEventListener("click", myFunction);

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

Try It! 


Add multiple 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! 

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! 


Add event handler to Window object

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

Example

Add event listener when the user resets the window size:

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

Try It! 


Pass parameters

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

Example

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

Try It! 


Event bubble or event capture?

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

Event delivery defines the order in which element events are triggered. If you insert a <p> element into a <div> element and the user clicks on the <p> element, which element’s "click" event will be triggered first?

In the bubble , the internal elements of the event will be triggered first, and then trigger the external elements, namely: click event <p> The first element is triggered, then triggers the click event <div> element.

In the capture , the event will first external element is triggered, then the event will trigger internal elements, namely: <div> element to trigger the click event, then click the trigger event <p> element.

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

addEventListener(event, function, useCapture);

The default value is false, which means bubbling delivery. When the value is true, the event is delivered using capture.

Example

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

Try It! 


removeEventListener() method

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

Example

element .removeEventListener("mousemove", myFunction);

Try It! 


Browser support

The number in the table indicates the version number of the first browser that supports this method.

methodimage.pngimage.pngimage.pngimage.pngimage.png
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

Note: IE 8 and earlier versions of IE, Opera 7.0 and earlier versions do not support addEventListener() and removeEventListener() methods. However, for this type of browser version, you can use the detachEvent() method to remove the event handler:

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
     x.attachEvent("onclick", myFunction);
}

 Try It! 


HTML DOM Event Object Reference Manual

For all HTML DOM events, you can view our complete HTML DOM Event object reference manual .