HTML DOM addEventListener() Method

Initially: <img src="https://media.geeksforgeeks.org/wp-content/uploads/DOM-addEventListener-initial.png" alt="" width="665" height="204" class="aligncenter size-large wp-image-800990" />
Mouse Over Event: <img src="https://media.geeksforgeeks.org/wp-content/uploads/DOM-addEventListener-mouse-over.png" alt="" width="665" height="215" class="aligncenter size-large wp-image-800989" />
Mouse Clicked Event: <img src="https://media.geeksforgeeks.org/wp-content/uploads/DOM-addEventListener-mouse-clicked.png" alt="" width="768" height="298" class="aligncenter size-full wp-image-800988" />
Mouse Out Event: <img src="https://media.geeksforgeeks.org/wp-content/uploads/DOM-addEventListener-mouse-out.png" alt="" width="665" height="251" class="aligncenter size-large wp-image-800992" />

Last Updated : 13 Jun, 2023

The addEventListener() method attaches an event handler to the specified element. Syntax:

element.addEventListener(event, function, useCapture)

Note: The third parameter use capture is usually set to false as it is not used. Below program illustrates the DOM addEventListener(): Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Location host Property</title>
    <style>
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>addEventListener() method</h2>

    <p>
     This example uses the addEventListener() 
     method to add many events on the same 
     button.
    </p>

    <button id="myBtn">Try it</button>

    <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>"
            this.style.backgroundColor = "red"
        }

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

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

</body>

</html>