Suppose you want to listen for click events on a button in your HTML document. What’s the best way to achieve this?
To check if a button is clicked in JavaScript, create an event listener using the addEventListener() method of the EventTarget Web API.
In this post, I will walk you through the best ways to do it for a single button as well as for all buttons in your HTML document.
How It Works
The addEventListener() method has two required parameters, type and listener:
addEventListener(type, listener);The type parameter represents the event type. JavaScript, as any developer who’s seen this and that will tell you, has a large number of events to listen for. In this case, the event we’re interested in is the click event.
The listener parameter is an object implementing the event listener callback or, in our case, a function that gets fired whenever the event listener hears an event.
Example
Suppose we’re building a website with HTML and JavaScript.
And that, in this website, there’s a <button> element with an ID of #button-1. We want to listen to clicks on that element and, for the sake of our example, log them in the browser’s console.
Our HTML markup looks like this:
<html>
<head>
<title>My Website</title>
</head>
<body>
<button id="button-1">Click me!</button>
</body>
</html>We can approach this task in two ways: One is by listening to clicks on this button specifically. The other by listening to clicks on any button, while still knowing which button was clicked.
Listen to Clicks on This Button
To listen to clicks on this button, and this button only, we can create an event listener that targets its ID using the Element.querySelector() method in JavaScript.
document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });
// The button was clicked!Add this as an inline script at the end of your HTML document’s <body> tag or save it in a file and load it from your CDN (read about inline JavaScript code vs. external scripts).
For example, if we were to inline the script, our HTML markup would look like this:
<html>
<head>
<title>My Website</title>
</head>
<body>
<button id="button-1">Click me!</button>
<script>
document.querySelector('#button-1').addEventListener('click', function(){ console.log('The button was clicked!') });
</script>
</body>
</html>Listen to Clicks on Any Button
To listen to clicks on any button, we can create a generic event listener for the <button> element.
We can use the querySelectorAll() method. For each occurence of a button, we will save the ID in a variable named id and create an event listener for the click event.
Then, we can log which button was clicked in the browser’s console:
document.querySelectorAll('button').forEach(occurence => {
let id = occurence.getAttribute('id');
occurence.addEventListener('click', function() {
console.log('A button with ID ' + id + ' was clicked!')
} );
});
// A button with ID button-1 was clicked!If we had a second <button> element with an ID of button-2, the script would log “A button with ID button-2 was clicked!” You can pull any attribute of a DOM element with the Element.getAttribute() method, so feel free to adapt this function as you wish.
Once again, embed this in a <script> tag at the end of your HTML document’s <body> or load it from your CDN.
In Conclusion
Thanks for reading this far! I hope this tutorial helped. If you have any questions, you’re having challenges to implement the above, or you’ve found other good ways to do this, leave a comment below.
There’s more than one way to listen to clicks on a button, but, at least in my book, this is the cleanest one. It makes use of JavaScript’s built-in methods to get the job done in a standardized way that’s supported by all modern browsers.
yesnt