Javascript Reference - HTML DOM addEventListener() Method

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

Browser Support


`addEventListener`	Yes	9.0	Yes	Yes	Yes

Syntax

element.addEventListener(event, function, useCapture)

Parameter Values

Parameter	Description
event	Required. the name of the event.
function	Required. handler function to run.
useCapture	Optional Boolean value: true - The event handler is executed in the capturing phase false - Default. The event handler is executed in the bubbling phase

Return Value

No return value

Example

The following code shows how to add a click event to a <button> element.


<!DOCTYPE html>
<html>
<body>
<button id="myBtn">test</button><p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});<!--  www.ja va 2 s.c  o  m-->
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

This example demonstrates how to add two click events on the same <button> element.


<!DOCTYPE html>
<html>
<body>
<button id="myBtn">Try it</button>
<!--from  w w  w . j a  va2s. c  om-->
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
    console.log ("Hello World!")
}

function someOtherFunction() {
    console.log ("This function was also executed!")
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

This example demonstrates how to add many events on the same <button> element.


<!DOCTYPE html>
<html>
<body>
<button id="myBtn">test</button>
<!--from  w w w.ja va 2 s .co m-->
<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}

function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}

function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code uses addEventListener method to add mouse out and mouse over events to a paragraph.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--  ww w  .j  a  v  a  2  s .co  m-->
  background: gray;
  color: white;
  padding: 10px;
  margin: 5px;
  border: thin solid black
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p id="block2">This is a test.</p>
  <button id="pressme">Press Me</button>
  <script type="text/javascript">
    var pElems = document.getElementsByTagName("p");
    for ( var i = 0; i < pElems.length; i++) {
      pElems[i].addEventListener("mouseover", handleMouseOver);
      pElems[i].addEventListener("mouseout", handleMouseOut);
    }
    document.getElementById("pressme").onclick = function() {
      document.getElementById("block2")
              .removeEventListener("mouseout",handleMouseOut);
    }
    function handleMouseOver(e) {
        e.target.innerHTML += "mouseover";
      e.target.style.background = 'red';
      e.target.style.color = 'black';
    }
    function handleMouseOut(e) {
        e.target.innerHTML += "mouseout";
      e.target.style.removeProperty('color');
      e.target.style.removeProperty('background');
    }
  </script>
</body>
</html>

Click to view the demo