Skip to content
Related Articles

Related Articles

What is the best way to add an event in JavaScript ?
  • Last Updated : 14 Apr, 2021

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: 

  1. HTML event handler attribute
  2. HTML DOM property
  3. HTML DOM addEventListener() method

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 onlick = "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:

Before Clicking the button:

After Clicking the button:


 

Disadvantage:

  1. Assigning event handlers using HTML event handler attributes are considered a bad practices.
  2. The event handler code is mixed with the HTML code, which will make the code more difficult to maintain and extend.
  3. 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:

Before Clicking the button:

After Clicking the button:

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

Example 3: In this example, we will add an event using the addEventListener() method. The addEventListener() mathod 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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :