How To Use addEventListener() Method Using JavaScript?


Share:
Published By: Admin, Published On: Nov 23, 2021, Category: Javascript


Hello Friends,

Now let's see example of how to use addEventListener() method example. We will check how to use addEventListener() method. This is a short guide on use addEventListener() method in javascript. Here you will learn how to use javascript addEventListener() method. Let's get started with how to use addEventListener() method in javascript.

Here i will give you many example how to use addEventListener() method using javascript.

Example : 1
<!DOCTYPE html>
<html>
    <head>
        <title>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</title>
    </head>
    <body>
        <h3>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</h3>
        <p> Click the following button to see the effect. </p>
        <button id = "btn">Click me!</button>
        <p id = "tst"></p>
        <script>
            document.getElementById("btn").addEventListener("click", a1);
            function a1() {
                document.getElementById("tst").innerHTML = "MyWebtuts.com" + "<br>" + "Welcome to the  MyWebtuts.com";
            }
        </script>
    </body>
</html>  
Output :
MyWebtuts.com
Welcome to the MyWebtuts.com
Example : 2
<!DOCTYPE html>
<html>
    <head>
        <title>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</title>
    </head>
    <body>
        <p>How To Use addEventListener() Using JavaScript? - MyWebtuts.com</p>
        <p> Click the following button to see the effect.</p>
        <button id = "a1"> Click me </button>
        <p id = "b1"></p>
        <p id = "c1"></p>
        <script>
            function fun() {
                alert("Welcome to the MyWebtuts.com");
            }
             
            function fun1() {
               document.getElementById("b1").innerHTML =  "This is second function";

            }
            function fun2() {
               document.getElementById("c1").innerHTML =  "This is third function";
            }
            var a1btn = document.getElementById("a1");
            a1btn.addEventListener("click", fun);
            a1btn.addEventListener("click", fun1);
            a1btn.addEventListener("click", fun2);
        </script>
    </body>
</html>  
Output :
Welcome to the MyWebtuts.com(Alert Message)
This is second function
This is third function

It will help you...

Share: