HTML DOM Document addEventListener() Method

Definition and Usage

addEventListener() The method attaches an event handler to the document.

Instance

Example 1

Add a click event to the document:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Try it yourself

Simpler syntax:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Try it yourself

Example 2

You can add multiple event listeners to the document:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Try it yourself

Example 3

You can add different types of events:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Try it yourself

Example 4

When passing parameters, use 'anonymous function' to call a function with parameters:

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

Try it yourself

Example 5

Change the background color of the document:

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

Try it yourself

Example 6

Use the removeEventListener() method:

// Add event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);

Try it yourself

Syntax

document.addEventListener(type, function, capture)

Parameters

Parameters Description
type

Mandatory. Event name.

Do not use the 'on' prefix.

Use 'click' instead of 'onclick'.

All HTML DOM events are listed at:

HTML DOM Event Object Reference Manual
function

Mandatory. The function that runs when an event occurs.

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.
capture

Optional (default = false).

  • true - The handler is executed in the capture phase
  • false - The handler is executed in the bubble phase

Return value

None.

Technical details

This method adds the specified event listener function to the listener collection of the current node to handle the specified type of event. If capture is set to true, the listener is registered as a capture event listener. If capture is set to false, it is registered as a normal event listener.

addEventListener() it may be called multiple times, multiple event handlers can be registered for the same type of event on the same node. However, it should be noted that DOM cannot determine the order in which multiple event handlers are called.

If an event listener function is registered on the same node with the same type and capture the parameter is registered twice, the second registration will be ignored. If a new event listener is registered on a node while handling an event on that node, the new event listener will not be called for that event.

When Node.cloneNode() Method or Document.importNode() When copying a Document node, this method does not copy the event listeners registered for the original node.

This method is also defined on the Document and Window objects, and operates in a similar manner.

Browser support

document.addEventListener It is a DOM Level 2 (2001) feature.

All browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related pages

Element methods

addEventListener() method

removeEventListener() method

Document methods

addEventListener() method

removeEventListener() method

Tutorial

HTML DOM EventListener

Complete DOM Event List