What is the best way to add an event in JavaScript ?

Last Updated : 25 Jul, 2024

Javascript has events to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM).

There are three ways to assign an event handler:

The best way to add an event in JavaScript script is addEventListener(). Let’s dive into few examples to understand.

Example 1: In this example, we will add an event using event handler attributes.

Syntax:

<element onclick = "script">

The onclick event attribute works when the user clicks on the button. When the mouse clicked on the element then the script runs.

HTML

<!doctype html>
<html>

<head>
    <script>
        function Geeks() {
            alert('Hi there!');
        }
    </script>
</head>

<body>
    <button type="button" 
        onclick="Geeks()">
        Click me event
    </button>
</body>

</html>

Output:

HTML

<!doctype html>
<html>

<head>
    <script>
        function Geeks() {
            alert('Hi there!');
        }
    </script>
</head>

<body>
    <button type="button" 
            onclick="Geeks()">
        Click me event
    </button>
</body>

</html>

Disadvantage:

Assigning event handlers using HTML event handler attributes is considered a bad practice.
The event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.
There is a problem with timing as if the element is loaded fully before the JavaScript code, users can start interacting with the element on the webpage which will cause an error.

Example 2: In this example, we will add an event using the HTML DOM property.

Syntax:

element.onclick = function() {}

HTML

<!doctype html>
<html>

<body>
    <button id="button">Click me event</button>
    <script>
        let btn = document.getElementById("button");

        btn.onclick = function() {
            alert('Hi there');
        };
    </script>
</body>

</html>

Output:

Disadvantage: We can’t assign more than one event handler for a particular event.

Example 3: In this example, we will add an event using the addEventListener() method. The addEventListener() method takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.

Syntax:

element.addEventListener(event, listener);

HTML

<!doctype html>
<html>

<body>
    <button id="button">Click me event</button>

    <script>
        let btn = document.getElementById("button");

        btn.addEventListener('click', function() {
            alert('Hi there');
        });

        btn.addEventListener('click', function() {
            alert('Welcome To GeeksforGeeks');
        });
    </script>
</body>

</html>

Output:

Advantage: We can assign more than one event handler for particular event.

Conclusion: Now you can Conclude that addEventListener() is the best way to add an event in JavaScript script due to it’s Multiple event handler for particular event.

What is Event Bubbling and Capturing in JavaScript ?

aksrathod07

Improve

Article Tags :

What is the best way to add an event in JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?