Difference between addEventListener and onclick in JavaScript

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.
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
JavaScript-Questions
Difference Between
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Similarities and Difference between Java and C++
Difference between Compile-time and Run-time Polymorphism in Java
Difference between Internal and External fragmentation
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request