Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between addEventListener and onclick in JavaScript

  • Last Updated : 15 Aug, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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
Recommended Articles
Page :