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\u2019ll dive into the practical differences and when to use each. <\/p>\n\n\n\n
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<\/a> we explored an example of an onclick event defined directly within HTML: <\/p>\n\n\n\n Here\u2019s a break down of what\u2019s happening: <\/p>\n\n\n\n So, when clicking the button, the pop-up alert will display the message \u201cHello World!\u201d. Give it a try here<\/a>. <\/p>\n\n\n\n click is used with addEventListener and you can attach multiple functions to it without overwriting the previous function. <\/p>\n\n\n\n Here is the same example code from above, but using This approach separates your HTML from your JavaScript. Give it a try here<\/a><\/p>\n\n\n\n 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. <\/p>\n\n\n\n Whereas click,with addeventlistener,lets you attach multiple functions to the same element. <\/p>\n\n\n\n Here<\/a> is an example of using two functions with click using the same coding above but with the added function \u2018console.log\u2019: <\/p>\n\n\n\n This will write to the console log \u2018Button was clicked!\u2019 as well as a pop-up box message \u2018Hello World.\u2019 <\/p>\n\n\n\n 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<\/a><\/p>\n\n\n\n Other than how click and onclick handle multiple functions, they also differ to how they\u2019re used in HTML and JavaScript. <\/p>\n\n\n\n onclick can be used directly in HTML. This works because onclick is an official HTML attribute mapped to the element’s JavaScript onclick property. <\/p>\n\n\n\n click cannot be used directly into HTML and would need to be coded in JavaScript in order to work as the browser wouldn\u2019t recognise click as an attribute. <\/p>\n\n\n\n For example, this wouldn\u2019t work: <\/p>\n\n\n\n<button id=\"myButton\" onclick=\"alert('Hello world!')\">Click Me<\/button> <\/code><\/pre>\n\n\n\n\n
<button><\/code><\/strong>: This is a standard HTML button element. <\/li>\n<\/ul>\n\n\n\n\n
\n
What is click?<\/h2>\n\n\n\n
click<\/code><\/p>\n\n\n\n<button id=\"myButton\">Click Me<\/button> <\/code><\/pre>\n\n\n\n\n
\n
<script> \n\n document.getElementById('myButton').addEventListener('click', function () { \n\n alert('Hello world!'); \n\n }); \n\n<\/script> <\/code><\/pre>\n\n\n\n\n
\n
\n
Using Multiple Functions<\/h3>\n\n\n\n
button.addEventListener('click', function () { \n\n console.log('Button was clicked!'); \n\n }); <\/code><\/pre>\n\n\n\nOther differences<\/h3>\n\n\n\n
HTML usage<\/h4>\n\n\n\n
html \n\n<button click=\"alert('Hello!')\">Click Me<\/button> <\/code><\/pre>\n\n\n\n