DEV Community

SELVAKUMAR R
SELVAKUMAR R

Posted on

addEventListner() Method in Java script

addEventListner() method in Java Script is attach the event handler for the specified element in the document object model (Dom)

This method allows to execute the function when the particular event happen on the element.

Syntax:

target.addEventListener(event, function)

target - we need to provide the element to attach the event handler

event - we need to provide the what type of event that specified element can do.

function - we need to provide the method for specified element after event happen what type of action that target element done in the web page

Ex:

<body>

<button id="needtoclick">click the button</button>

<script>

const btn = Document.getElementById("needtoclick");

btn.addEventListner("click",() => console.log("Button is clicked"))

</script>

</body>
Enter fullscreen mode Exit fullscreen mode

removeEventListner()

This method is used to remove the event handler for the element in document object model

Syntax:

targert.removeEventlistner(event,function)

Hoisted and Not Hoisted in Java Script:

Hoisted:

when the compilation function declaration moved top of the calling function

<script>
        // function declaration is hoisted 


        adddeclaration();

        function adddeclaration(){
            console.log("Adding the function declaration");  
        }


        adddeclaration();
    </script>

Output:

Adding the function declaration
Enter fullscreen mode Exit fullscreen mode

Not Hoisted:

we need to be declared the function before the function calling. whether the function called before the declaration it throws the error

<script>




        // function expersion is not hoisted

        addExpersion(); -> it throws the error

        let addExpersion =function(){
            console.log("Adding the function Expersion");

        }

         addExpersion(); - > it will provide output
    </script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)