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
How to call a JavaScript function on a click event?
To call a function on click event in JavaScript, you can use either the addEventListener method or the onclick event attribute. The addEventListener method is a general way to attach an event handler to a DOM element, and it allows you to specify the event and the callback function to be called when the event occurs.
The onclick attribute is a specific event attribute that allows you to specify a JavaScript function to be called when the element is clicked. Both methods allow you to specify a function to be called when the element is clicked, but the addEventListener method is more flexible and can be used with any type of event, while the onclick attribute is specific to the click event.
Method 1: Using addEventListener()
The addEventListener() method is the modern, preferred approach for handling events. It allows multiple event listeners on the same element and provides better control over event handling.
Syntax
element.addEventListener(event, function, capture)
Parameters
Event ? The name of the event which you want to apply on the element e.g. "click", "mouseover", "submit", etc.
Function ? The callback function which will be fired after the event occurred.
Capture ? Optional boolean value; whether the event should be executed in the capturing phase (default: false).
Example
In this example, we create a counter that increases each time the button is clicked using addEventListener().
<html>
<body>
<h2>Using the addEventListener() method</h2>
<p>Click on the button to increase the counter value by one</p>
<button id="btn">Click me</button>
<p><b>Counter: </b><span id="counter">0</span></p>
</body>
<script>
let btn = document.getElementById("btn");
let counter = document.getElementById("counter");
// Apply the addEventListener method
btn.addEventListener("click", function() {
// Increase the existing value by 1
counter.innerText = parseInt(counter.innerText) + 1;
});
</script>
</html>
Method 2: Using onclick Attribute
The onclick attribute allows you to attach click events directly in HTML. While simpler for basic scenarios, it's less flexible than addEventListener().
Example
Here's the same counter example using the onclick attribute in HTML.
<html>
<body>
<h2>Using the onclick event attribute</h2>
<p>Click on the button to increase the counter value by one</p>
<button onclick="increaseCounter()">Click me</button>
<p><b>Counter: </b><span id="counter">0</span></p>
</body>
<script>
function increaseCounter() {
// Get the counter element
let counter = document.getElementById("counter");
// Increase the existing value by 1
counter.innerText = parseInt(counter.innerText) + 1;
}
</script>
</html>
Method 3: Using onclick Property
You can also assign click handlers using the onclick property in JavaScript.
<html>
<body>
<h2>Using the onclick property</h2>
<button id="myButton">Click me</button>
<p id="output">Button not clicked yet</p>
</body>
<script>
let button = document.getElementById("myButton");
let output = document.getElementById("output");
// Assign click handler using onclick property
button.onclick = function() {
output.innerText = "Button was clicked!";
};
</script>
</html>
Comparison
| Method | Multiple Listeners | Modern Approach | Event Removal |
|---|---|---|---|
| addEventListener() | Yes | Yes | removeEventListener() |
| onclick attribute | No | No | Limited |
| onclick property | No | Partially | Set to null |
Conclusion
Use addEventListener() for modern web development as it provides better flexibility and allows multiple event listeners. The onclick attribute is simpler for basic scenarios but less powerful than the addEventListener method.
25K+ Views
