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