Open In App

Difference between addEventListener and onclick in JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

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. Any number of event handlers can be added to a single element without overwriting existing event handlers.

Syntax:

element.addEventListener(event, listener, useCapture);

Parameters:

  • event: Event can be any valid JavaScript event. Events are used without the “on” prefix like using “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




<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>


Output:

onclick

The onclick event logs the click activity, and then calls a desired function, the onClick event only adds one event to an element.

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




<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>


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.


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads