How to handle bind an event using JavaScript?

Javascript Web Development Front End Technology

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

Shubham Vora

Updated on: 26-Aug-2022

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started