DOM addEventListeners in javascript

 

<!DOCTYPE html>

<html>

    <head>

        <title>DOM Add Event Listeners</title>

       

        <style>

        .abc {

            text-transform: uppercase;        

        }

        .outer{

            width: 200px;

            height: 200px;

            background-color: aqua;

        }

        .inner{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            margin: 30px auto;

           

        }

        </style>

    </head>

   

    <body class="wrapper">

        <h1 class="abc">DOM Add Event Listeners</h1>

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

        <h2>useCapture example</h2>

        <div class="outer">

            outer div

            <p class="outerpara"></p>

            <div class="inner">

                inner div

                <p class="innerpara"></p>

            </div>

        </div>

        <script>

            // here have directly add event in script and call function onclick

            var element;

            element = document.querySelector(".abc").onclick = myFunction;

            function myFunction(){

                document.querySelector('.wrapper').style.background = "pink";

            }

            /*

            DOM addEventListener() Method

            syntex: addEventListener('eventName',functionName,useCapture);

            ignore on keyword before in eventName, like:

            click , mouseenter, mouseout ,dblclick etc

            this method take three parameter,third one will be discuss later on.

            make sure first parameter will be event and second para will be function

            name that will be call on event.

            */

            element = document.querySelector(".abc").addEventListener('click',function(){

                document.querySelector("#demo").innerText = "This is EventListeners";

            });

            element = document.querySelector(".abc").addEventListener('mouseenter',anotherFunction);

            function anotherFunction(){

                // document.querySelector('.abc').style.color = "green";

                this.style.color = "green";

                //  this keyword points to the current element.

            }

            // we can also call different eventListeners with same event e.g click.

            // useCapture

            /*

            when you have div inside another div and bold have onclick eventListeners.

            if you click on inner div than outer div click event will call even you

            dont need it to call and you also want which event call first and which

            event call later on. To deal with this scenario we use third parameter

            in eventListeners method called useCapture.Let see with example.

            */

            // document.querySelector(".outer").addEventListener('click',fun1);

            // document.querySelector(".outer").addEventListener('click',fun2);

            document.querySelector(".outer").addEventListener('click',fun1,false);

            document.querySelector(".outer").addEventListener('click',fun2,true);

            function fun1(){

                document.querySelector(".outerpara").innerText = 'outer div event called';

            }

            function fun2(){    

                document.querySelector(".innerpara").innerText = 'inner div event called';

            }

        </script>

    </body>

    </html>