HTML DOM Element addEventListener()
Examples
Add a click event to a <button> element:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Try it Yourself »
More compact code:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Try it Yourself »
More examples below.
Description
The addEventListener()
method attaches an event handler to an element.
Element Methods
The removeEventListener() Method
Document Methods
The removeEventListener() Method
Tutorials
Syntax
element.addEventListener(event, function, useCapture)
Parameters
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Return Value
NONE |
More Examples
You can add many events to the same element:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Try it Yourself »
You can add different events to the same element:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Try it Yourself »
To pass parameter values, use an "anonymous function":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Try it Yourself »
Change the background color of a <button> element:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Try it Yourself »
The difference between bubbling and capturing:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Try it Yourself »
Remove an event handler:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Try it Yourself »
Browser Support
element.addEventListener()
is a DOM Level 2 (2001) feature.
It is fully supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |