How to Add event listener to Button in JavaScript ?
Last Updated :
22 Jul, 2024
Improve
In web development adding an event listener to a button is a common task that allows us to execute JavaScript code in response to user interactions, such as clicks. This helps us to create interactive and flexible web pages.
Using addEventListener()
The addEventListener method is a versatile and widely used way to attach event listeners to elements. It allows us to add multiple events to a single element and provides better control over event handling.
Syntax:
element.addEventListener(event, function, useCapture);Where:
- element: The button element.
- event: The event type (e.g., 'click').
- function: The function to execute when the event occurs.
Example: In below example we have added the 'click' event listener to the button using the addEventListener method.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
margin: 0;
background-color: #f0f0f0;
}
div {
margin-bottom: 20px;
font-size: 18px;
color: #333;
}
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div>Adding Event Listener using
addEventListener method</div>
<button id="myButton">Click Me</button>
<script>
document.getElementById('myButton')
.addEventListener('click', function () {
alert('Button clicked!');
});
</script>
</body>
</html>
<html><head> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50vh; margin: 0; background-color: #f0f0f0; } div { margin-bottom: 20px; font-size: 18px; color: #333; } button { padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } </style></head><body> <div>Adding Event Listener using addEventListener method</div> <button id="myButton">Click Me</button> <script> document.getElementById('myButton') .addEventListener('click', function () { alert('Button clicked!'); }); </script></body></html>Output:
