Skip to content

JavaScript addEventListener() | Method

  • by

The addEventListener() method is an inbuilt function in javascript and it is used to attach an event handler to a particular element. You can add multiple event handlers to a particular element without overwriting the existing event handlers.

document.addEventListener(event, function, Capture) 

The third parameter is optional to define.

Simpler code:

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

JavaScript addEventListener() example

Simple example code click the given HTML button to see the effect.

<!DOCTYPE html>  
<html>  
<body>  

  <button id = "btn"> Click</button>  

  <script>  
    document.getElementById("btn").addEventListener("click", fun);  
    function fun() {  
      console.log("Hello addEventListener()")  
    }  
  </script>  
</body>  
</html>  

Output:

JavaScript addEventListener() Method

You can add any event listeners to the document:

<body>

  <p>Click anywhere in the document.</p>

  <p id="demo"></p>

  <script>
    document.addEventListener("click", f1);
    document.addEventListener("click", f2);

    function f1() {
      document.getElementById("demo").innerHTML += "First function"
    }

    function f2() {
      document.getElementById("demo").innerHTML += "Second function"
    }
  </script>

</body>

Or add different types of events:

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

Do comment if you have any doubts or suggestions on this JS event handler topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading