Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between addEventListener and on-click in JavaScript
The addEventListener and the onclick event both listen for an event. Both these event methods record an event and execute a function based on that event whenever a button is clicked. Though there is a difference between how both these events work.
In this article, we are going to explore the differences between the addEventListener and the onclick function in JavaScript.
addEventListener Method
The addEventListener method uses an event handler to attach it to the specified element. This method is more flexible and allows multiple event listeners on the same element.
Syntax
element.addEventListener(event, listener, useCapture);
Parameters
-
event ? Event can be defined as any valid JavaScript event. The events are generally used without the on prefix (as used in the onclick method).
-
Listener (handler function) ? This defines a JavaScript function that responds to an event that occurs.
-
useCapture (Optional Parameter) ? This is an optional parameter that takes an optional value that specifies whether an event should be executed in a capturing phase or a bubbling phase.
Example: Multiple Event Listeners with addEventListener
The example program below shows that the addEventListener method can support multiple event handlers applied to the same element.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<button id="btn">Click here</button>
<h3 id="text1"></h3>
<h3 id="text2"></h3>
<script>
let btn_element = document.getElementById("btn");
btn_element.addEventListener("click", () => {
document.getElementById("text1")
.innerHTML = "Executed Task 1";
})
btn_element.addEventListener("click", () => {
document.getElementById("text2")
.innerHTML = "Executed Task 2";
});
</script>
</body>
</html>
When you click on the "Click here" button, it will show both: 'Executed Task 1' 'Executed Task 2'
onclick Property
The onclick property captures the click event and then calls the desired function. The onclick event only adds a single event to an element, and if multiple onclick handlers are assigned, only the last one will execute.
Example: Single Event Handler with onclick
The example program below shows that we cannot have multiple onclick handlers on the same element. The second assignment will overwrite the first one.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<button id="btn">Click here</button>
<h3 id="text1"></h3>
<h3 id="text2"></h3>
<script>
let btn_element = document.getElementById("btn");
btn_element.onclick = () => {
document.getElementById("text1")
.innerHTML = "Executed Task 1";
};
btn_element.onclick = () => {
document.getElementById("text2")
.innerHTML = "Executed Task 2";
};
</script>
</body>
</html>
When you click on the "Click here" button, it will show only: 'Executed Task 2'
Comparison
| Feature | addEventListener | onclick |
|---|---|---|
| Multiple Handlers | Yes - can attach multiple listeners | No - only one handler at a time |
| Event Propagation Control | Yes - supports capturing/bubbling | Limited - bubbling phase only |
| Removing Listeners | Yes - using removeEventListener() | Yes - by setting to null |
| HTML Attribute | No - JavaScript only | Yes - can use onclick="function()" |
| Browser Support | Modern browsers (IE9+) | All browsers |
Key Points
- addEventListener is more flexible and allows multiple event listeners on the same element
- onclick can only have one handler per element; subsequent assignments overwrite previous ones
- addEventListener provides better control over event propagation with the useCapture parameter
- onclick can be used both as a JavaScript property and as an HTML attribute
Conclusion
Use addEventListener for modern JavaScript applications as it offers more flexibility and better event handling capabilities. Use onclick only for simple scenarios or when backward compatibility is required.
1K+ Views
