
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to handle bind an event using JavaScript?
In this tutorial, we will learn how to handle bind an event using JavaScript.
Events are the actions or occurrences in the system by the browser or users. There are various types of events that represent various activities performed by the browser or users. For example, if a user clicks on a button, it triggers an event named "click." Similarly, if a webpage finished loading, it triggered an event called "load."
An Event Listener is a program that continuously listens to or waits for an event to occur. It is one of the most important parts of JavaScript. The functions or methods that execute after an event occurs and handle that event are called the Event Handlers.
JavaScript binds the events to their respective event handlers to handle the events. And the method addEventListener is used for this purpose.
Binding Event with Event Handlers using the addEventListener
In JavaScript, the addEventListener method binds a specific event handler to a specific event. It usually takes as parameters the event name and an event handler function and binds the event to that event handler
Syntax
Users can follow the below syntax to handle bind an event using addEventListener in JavaScript.
element.addEventListener(event, eventHandler, useCapture);
In the above syntax, we have passed the event and eventHandler callback function as a parameter of the addEventListener method.
Parameters
event − it is the name of the event which needs to be bound with the event handler.
eventHandler − a function or method that handles a particular event
useCapture − it is defined as whether the event handler executes in the bubbling or capturing phase. It is optional, and by default, it is false, which implies the bubbling phase.
Example
Bind a click event with a button
In the below example, we have used the addEventListener to bind an event in JavaScript. We are changing an element's inner text using a button click event.
<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>
In the above output, users can see after clicking the button a “click” event trigger observed by Javascript Event Listener, and it is called the specified Event Handler for that event which is, in this case, the clickHandler function. The clickHandler function then changes the inner text of the root div.
Example
Bind multiple events with an element
In the below example, we have used the addEventListener to bind multiple events in JavaScript. We have used the "click," "mouseenter," and "mouseleave" events in this example. The "mouseenter" event is triggered whenever the user moves the mouse pointer over that element. The "mouseleave" event is triggered whenever the user leaves the mouse pointer on that element. We used the event handlers to change the background color and text of that element.
<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 = 'The Mouse pointer is on the element!' element.style.backgroundColor = '#56ea87' } function mouseLeaveHandler() { element.innerHTML = 'The Mouse pointer leaves 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 from Events using the removeEventListener
In JavaScript, removeEventListener is used to remove a specific event handler associated with an event. It takes the event, and the event handler in the parameters, and the method removes the binding between them.
Syntax
Users can follow the below syntax to use removeEventListener in JavaScript.
element.removeEventListener(event, eventHandler, useCapture)
Parameters
event − it is the name of the event which needs to be unbound with the event handler.
eventHandler − a function or method which handles the particular event.
useCapture − it is defined as whether the event handler executes in the bubbling or capturing phase. It is optional, and by default, it is false, which implies the bubbling phase.
Example
In the below example, we have used the removeEventListener to unbind an event from the associated event handler in JavaScript. We are unbinding the "mouseenter" event’s event handler from that event by a button’s "click" event handler. The "mouseenter" event handler increments a counter value, and by using the "Stop Counter" button, we are stopping the counter from incrementing anymore.
<html> <body> <h2>Unbinding an event from the associated event handler 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) } // Binding events button.addEventListener('click', clickHandler) element.addEventListener('mouseenter', mouseEnterHandler) </script> </body> </html>
Before the “Stop Counter” button, click counter is incrementing on the “mouseenter” event.
After the “Stop Counter” button is clicked, the counter is stopped
- Related Articles
- How to handle a link click event using jQuery?
- How to handle a double click event using jQuery?
- How to handle a mouse right click event using jQuery?
- How to handle jQuery AJAX success event?
- How to handle the click event in Listview in Android using Kotlin?
- How to bind a click event to a Canvas in Tkinter?
- How to bind an animation to a division element using CSS?
- How to handle action event for JComboBox in Java?
- How to handle a Button click event in tkinter?
- How to apply bind() function in JavaScript?
- How to wait resize end event and then perform an action using JavaScript?
- How to handle the click event in ListView in android?
- How to bind a Tkinter event to the left mouse button being held down?
- How to handle IllegalArgumentException inside an if using Java
- How to determine if JavaScript object is an event?
