In JavaScript, click and onclick are two distinct approaches to handling click events. While they might seem similar at first glance, they differ in usage and behaviour. In this blog post, we’ll dive into the practical differences and when to use each.
What is onclick?
onclick is a property of an element that you can assign just one function to. In our previous post, How to remove onclick events with Javascript we explored an example of an onclick event defined directly within HTML:
<button id="myButton" onclick="alert('Hello world!')">Click Me</button> Here’s a break down of what’s happening:
<button>: This is a standard HTML button element.
- id=”myButton”: Gives the button a unique identifier so it can be targeted via JavaScript or CSS.
- onclick=”alert(‘Hello world!’)”:This tells the browser to run the alert(‘Hello world!’) function when t
So, when clicking the button, the pop-up alert will display the message “Hello World!”. Give it a try here.
What is click?
click is used with addEventListener and you can attach multiple functions to it without overwriting the previous function.
Here is the same example code from above, but using click
<button id="myButton">Click Me</button> - This creates a button on the page with the text “Click Me”.
- It has an id of “myButton”, which allows JavaScript to find and interact with it.
<script>
document.getElementById('myButton').addEventListener('click', function () {
alert('Hello world!');
});
</script> - document.getElementById(‘myButton’): Finds the button using its id.
- .addEventListener(‘click’, ): Listens for a click event on that button.
- function () { alert(‘Hello world!’); }: This function runs when the button is clicked. It shows an alert box with the message “Hello world!”.
This approach separates your HTML from your JavaScript. Give it a try here
Using Multiple Functions
Both click and onclick respond to user clicks, but the most practical difference is that onclick only allows one function at a time as setting a new one replaces the previous one.
Whereas click,with addeventlistener,lets you attach multiple functions to the same element.
Here is an example of using two functions with click using the same coding above but with the added function ‘console.log’:
button.addEventListener('click', function () {
console.log('Button was clicked!');
}); This will write to the console log ‘Button was clicked!’ as well as a pop-up box message ‘Hello World.’
If we try the same with onclick we will just get the console message. This is because of the limitation of onclick where you can only assign one function and adding more functions will overwrite the previous one. Give it a try here
Other differences
Other than how click and onclick handle multiple functions, they also differ to how they’re used in HTML and JavaScript.
HTML usage
onclick can be used directly in HTML. This works because onclick is an official HTML attribute mapped to the element’s JavaScript onclick property.
click cannot be used directly into HTML and would need to be coded in JavaScript in order to work as the browser wouldn’t recognise click as an attribute.
For example, this wouldn’t work:
html
<button click="alert('Hello!')">Click Me</button> You can give it a try here.
JavaScript usage
Both click and onclick can be used in JavaScript.
onclick is used by telling a specific HTML element what to do when it’s clicked.
click is used with addEventListener, allowing you to attach multiple functions to the same element without overwriting.
Summary
onclick works for simple cases, for demos and quick tasks. It can be put directly into HTML, which makes it fast for testing. However, this approach can be limiting in larger projects and can lead to messy and hard to maintain code.
click with addeventlistener , on the other hand, is a cleaner and more flexible approach, as it keeps JavaScript and HTML separated and allows to add more functions to the same event without conflict.
