Javascript Reference - HTML DOM addEventListener() Method

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

Browser Support


`addEventListener`	Yes	9	Yes	Yes	Yes

Syntax

document.addEventListener(event, function, useCapture)

Parameter Values

Parameter	Description
event	Required. A String that specifies the name of the event.
function	Required. Set the handler function.
useCapture	Optional. A Boolean value that sets when to execute the event the capturing phase or in the bubbling phase. Possible values: 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 handle a click event to the document.


<!DOCTYPE html>
<html>
<body>
<p>Click anywhere in the document.</p>
<!--from   w w w .j a  va 2  s.  c  om-->
<p id="demo"></p>

<script>
document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World!";
});
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to add click event for the document.

<html>
<head>
<script type="text/javascript">
  document.addEventListener("click", docEvent, true);
<!--from  w  w w  .ja  v  a  2  s. co  m-->
  function docEvent(evt) {
    alert("Document level.");
  }
</script>
</head>
<body onload="init()">
</body>
</html>

Click to view the demo

Example 3

This example uses the addEventListener() method to add two click events to the document.


<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
<!--  www  .  j a  v a2  s.  c  o  m-->
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 4

The following code shows how to add mouse over and mouse out event.


<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<!--   w  w w  . j  av a  2  s .c  om-->
<script>
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", mySecondFunction);
document.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 5

This example demonstrates how to pass parameter values when using the addEventListener() method.


<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
<!-- ww  w .j  a  va 2  s  .  c o  m-->
document.addEventListener("click", function() {
    myFunction(p1, p2);
});

function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 6

The following code shows how to change the background color of the document's <body> element in click event.


<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("click", function(){
    document.body.style.backgroundColor = "red";
});<!--  w  w  w . j av a 2s .co  m-->
</script>

</body>
</html>

The code above is rendered as follows: