HTML DOM addEventListener() Method

Definition and Usage

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

Example

Example 1

Add a click event to the <button> element:

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

Try it yourself

Example 2

More compact code:

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

Try it yourself

More examples can be found at the bottom of the page.

Syntax

element.addEventListener(type, function, useCapture)

Parameters

Parameters Description
type

Required. The name of the event.

Do not use the "on" prefix.

Use "click" instead of "onclick".


Complete list of DOM events
function Required. The function to be executed when the event occurs.
useCapture

Optional (default = false).

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

Return Value

None.

Technical Details

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

addEventListener() may be called multiple times, registering multiple event handlers for the same type of event on the same node. However, the DOM cannot determine the order in which multiple event handlers are called.

If an event listener function is registered with the same type and useCapture If the same parameter is registered twice, the second registration will be ignored. If a new event listener is registered on the same node while processing 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, event listeners registered on the original node will not be copied.

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

More examples

Example 3

You can add many events to the same element:

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

Try it yourself

Example 4

You can add different events to the same element:

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

Try it yourself

Example 5

If you need to pass parameter values, please use 'anonymous functions':

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

Try it yourself

Example 6

Change the background color of the <button> element:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Try it yourself

Example 7

The difference between bubbling and capturing:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Try it yourself

Example 8

Delete event handler:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Try it yourself

Browser support

element.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 list of DOM events