JavaScript DOM /BOM/ ES6

DOM :: Event Listener in JavaScript

July 30, 2021

 Adding Events Handlers

MethodDescription
document.getElementById(id).onclick = function(){code}Adding event handler code to an onclick event

Adding Event Listener

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

The addEventListener() method attaches an event handler to an element without overwriting existing event handlers.

You can add many event handlers to one element.

You can add many event handlers of the same type to one element, i.e two "click" events.

You can add event listeners to any DOM object not only HTML elements. i.e the window object.

The addEventListener() method makes it easier to control how the event reacts to bubbling.

When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.

You can easily remove an event listener by using the removeEventListener() method.

The first parameter is the type of the event (like "click" or "mousedown" or any other HTML DOM Event.

        <body>
        <button id="myBtn">Try it</button>
   
        <script>
   
        function myFunction() {
            alert ("Hello World!");
        }    
   
        document.getElementById("myBtn").addEventListener("click", myFunction);
   
        </script>
 
    </body>

OR
    <script>
    document.getElementById("myBtn").addEventListener("click", function() {
        alert("Hello World!");
    });
 </script>


Add Alert Date :: with addEventListener

    <body>        

        <button id="dte">Date is..</button>

        <script>

        var today = new Date();
         document.getElementById("dte").addEventListener("click",function(){
             alert(today);
         })

        </script>
    </body>


onClick event with addEventListener

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>submit form </title>
    </head>
    <body>

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

        <script>

            var btn = document.getElementById("btn");
            btn.addEventListener('click', function () {
                alert("this is alert message");
            })

        </script>

    </body>
    </html>


onClick -onChange event with addEventListener

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>submit form </title>
    </head>

    <body>

        <select id="change">
            <option>this is demo text</option>
            <option>this is demo two</option>
            <option>this is demo three</option>
            <option>this is demo four</option>
        </select>

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

        <script>

            // onclick Handelor

            var btn = document.getElementById("btn");
            btn.addEventListener('click', function () {
                alert("this is alert message");
            })

            // onChange Handelor

            var change = document.getElementById("change");
            change.addEventListener('change',function(){
                console.log(change.value);
            })
        </script>

    </body>
    </html>



onSubmission with addEventListener

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>submit form </title>
    </head>
    <body>
       
        <form id="form">
            <input type="text" id="username" placeholder="username" required />
            <input type="email" id="email" placeholder="email" required />
            <button value="register">
                Submit
            </button>
        </form>
        <script>

            var form = document.getElementById("form");

            form.addEventListener('submit',function(e){
                event.preventDefault()

                var username = document.getElementById("username").value
                console.log(username)

                var email = document.getElementById("email").value
                console.log(email)
            })

        </script>

    </body>
    </html>