Skip to content
Related Articles
Open in App
Not now

Related Articles

Difference between addEventListener and onclick in JavaScript

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 15 Aug, 2021
Improve Article
Save Article

The addEventListener() and onclick both listen for an event. Both can execute a callback function when a button is clicked. However, they are not the same. In this article, we are going to understand the differences between them.

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

Syntax:

element.addEventListener(event, listener, useCapture);

Parameters:

  • event: Event can be any valid JavaScript event. Events are used without the “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”.
  • listener(handler function): It can be a JavaScript function that responds to the event that occurs.
  • useCapture:  (Optional parameter) A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

Note: The addEventListener() method can have multiple event handlers applied to the same element. It doesn’t overwrite other event handlers. 

Example: Below is a JavaScript code to show that multiple events are associated with an element and there is no overwriting.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <button id="btn">Click here</button>
    <h1 id="text1"></h1>
    <h1 id="text2"></h1>
  
    <script>
        let btn_element = document.getElementById("btn");
  
        btn_element.addEventListener("click", () => {
            document.getElementById("text1")
                .innerHTML = "Task 1 is performed";
        })
  
        btn_element.addEventListener("click", () => {
            document.getElementById("text2")
                .innerHTML = "Task 2 is performed";
        });
    </script>
</body>
  
</html>

Output:

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

Syntax:

In HTML:

<element onclick="myScript">

In JavaScript:

object.onclick = function(){myScript};

The onclick is just a property. Like all object properties, if we write more than one property, it will be overwritten. 

Example: Below is a JavaScript code to show that multiple events cannot be associated with an element as there is overwriting

HTML




<!DOCTYPE html>
<html>
  
<body>
    <button id="btn">Click here</button>
    <h1 id="text1"></h1>
    <h1 id="text2"></h1>
  
    <script>
        let btn_element = document.getElementById("btn");
  
        btn_element.onclick = () => {
            document.getElementById("text1")
                .innerHTML = "Task 1 is performed";
        };
  
        btn_element.onclick = () => {
            document.getElementById("text2")
                .innerHTML = "Task 2 is performed";
        };
    </script>
</body>
  
</html>

Output:

Difference between addEventListener and onclick:

addEventListener

onclick

addEventListener can add multiple events to a particular element.onclick can add only a single event to an element. It is basically a property, so gets overwritten.
addEventListener can take a third argument that can control the event propagation.Event propagation cannot be controlled by onclick.
addEventListener can only be added within <script> elements or in external JavaScript file.onclick can be added as an HTML attribute also.
addEventListener does not work in older versions of Internet explorer, which uses attachEvent instead.onclick works in all browsers.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!