HTML DOM addEventListener() method

document.addEventListener()Attach event handlers to the document.

Usedocument.removeEventListener()Remove event handlers attached with the addEventListener() method.

Useelement .addEventListener()The method attaches an event handler to the specified element.

Syntax:

document.addEventListener(event, listener, useCapture)

Example

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

The numbers in the table specify the first browser version that fully supports the addEventListener() method:

Method
addEventListener()	1	1	7	1.0	9

Parameter	Description
event	(Required) The event can be any valid JavaScript event. When using an event, do not use the "on" prefix, for example, use "click" instead of "onclick", "mousedown" instead of "onmousedown". For a list of all HTML DOM events, please refer to our completeHTML DOM event object reference.
listener	(Required) A JavaScript function that can respond to the event that occurs. It can be any JavaScript function that responds to the event. When an event occurs, the event object is passed as the first parameter to the function. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object.
useCapture	(Optional) A boolean value specifying whether the event is executed at the capture phase or the bubble phase. The default is false. Possible values: true-Event listeners execute at the capture phase false-Event listeners execute at the bubble phase You can find more information about events in ourin the JavaScript event propagation tutorialRead more about event propagation

Return value:	None
DOM version:	DOM 2Level

Attach a click event to the document. When the user clicks on any location in the document, output "Hello World" in the <p> element with id="para":

Example

document.addEventListener("click", function() {
document.querySelector("#para").innerHTML = "Hello World!!!";
});

This example references an external "named" function:

Example

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

You can add many events to the document without overwriting existing events:

Example

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);

You can add different types of events to the document:

Example

document.addEventListener("mouseenter", myFunc1);
document.addEventListener("click", myFunc2);
document.addEventListener("mouseout", myFunc3);

When passing parameter values, please use an anonymous function that calls the specified function using the parameters:

Example

document.addEventListener("click", function() {
myFunc(x, y);
});

JavaScript Tutorial:Event Listener

JavaScript Tutorial:Event Propagation