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 handle bind an event using JavaScript?
In this tutorial, we will learn how to bind events using JavaScript.
Events are actions or occurrences triggered by the browser or users. There are various types of events that represent different activities. For example, if a user clicks on a button, it triggers a "click" event. Similarly, when a webpage finishes loading, it triggers a "load" event.
An Event Listener is a program that continuously listens for events to occur. Event Handlers are functions that execute when an event occurs. JavaScript binds events to their respective event handlers using the addEventListener method.
Binding Events with addEventListener
The addEventListener method binds a specific event handler to a specific event. It takes the event name and an event handler function as parameters.
Syntax
element.addEventListener(event, eventHandler, useCapture);
Parameters
event ? The name of the event to bind with the event handler.
eventHandler ? A function that handles the particular event.
useCapture ? Optional boolean that defines whether the event handler executes in the bubbling or capturing phase. Default is false (bubbling phase).
Example: Binding a Click Event
In this example, we bind a click event to a button that changes the text content when clicked.
<html>
<body>
<h2>Bind an event using <i>addEventListener</i> in JavaScript</h2>
<button id="btn">Click me</button>
<p id="root">Welcome to Tutorialspoint!</p>
<script>
// Event Handler
function clickHandler() {
document.getElementById('root').innerHTML = 'Button is Clicked!'
}
let element = document.getElementById('btn')
// Binding a click event
element.addEventListener('click', clickHandler)
</script>
</body>
</html>
When you click the button, the "click" event is triggered and handled by the clickHandler function, which changes the text content.
Example: Binding Multiple Events
You can bind multiple events to the same element. This example demonstrates "click," "mouseenter," and "mouseleave" events.
<html>
<body>
<h2>Bind multiple events using <i>addEventListener</i> in JavaScript</h2>
<div id="element" style="border: 1px solid black; padding: 10px;">
Welcome to Tutorialspoint!
</div>
<script>
let element = document.getElementById('element')
// Event Handlers
function clickHandler() {
element.innerHTML = 'The element is Clicked!'
element.style.backgroundColor = '#ff9797'
}
function mouseEnterHandler() {
element.innerHTML = 'Mouse pointer is on the element!'
element.style.backgroundColor = '#56ea87'
}
function mouseLeaveHandler() {
element.innerHTML = 'Mouse pointer left the element!'
element.style.backgroundColor = '#56eade'
}
// Binding multiple events
element.addEventListener('click', clickHandler)
element.addEventListener('mouseenter', mouseEnterHandler)
element.addEventListener('mouseleave', mouseLeaveHandler)
</script>
</body>
</html>
Removing Event Handlers with removeEventListener
The removeEventListener method removes a specific event handler from an event. It takes the same parameters as addEventListener.
Syntax
element.removeEventListener(event, eventHandler, useCapture)
Parameters
event ? The name of the event to unbind.
eventHandler ? The function to remove from the event.
useCapture ? Optional boolean matching the one used in
addEventListener.
Example: Removing an Event Handler
This example shows how to remove an event handler. The counter increments on mouseenter, but stops when you click the "Stop Counter" button.
<html>
<body>
<h2>Unbinding an event using <i>removeEventListener</i> in JavaScript</h2>
<button id="btn">Stop Counter</button>
<div id="element" style="border: 1px solid black; padding: 10px;">
Counter: 0
</div>
<script>
let element = document.getElementById('element')
let button = document.getElementById('btn')
let count = 0
// Event Handlers
function mouseEnterHandler(){
count += 1
element.innerHTML = "Counter: " + count
}
function clickHandler(){
// unbinding mouseenter event
element.removeEventListener('mouseenter', mouseEnterHandler)
button.innerHTML = "Counter Stopped"
}
// Binding events
button.addEventListener('click', clickHandler)
element.addEventListener('mouseenter', mouseEnterHandler)
</script>
</body>
</html>
Before clicking "Stop Counter," the counter increments each time you hover over the div. After clicking the button, the mouseenter event is removed and the counter stops incrementing.
Conclusion
Use addEventListener to bind events to elements and removeEventListener to unbind them. This approach provides flexible event management and allows multiple handlers per event.
11K+ Views
