How to Remove Event Handlers in JavaScript ?

In JavaScript, event handlers are functions attached to HTML elements to respond to specific events like clicks or mouse movements. Removing event handlers effectively detaches the specified function from listening to that particular event on that element.

Table of Content

Using removeEventListener()
Using inline event handlers

Using removeEventListener()

This method allows us to remove event listeners that were previously added with addEventListener(). Element is the HTML element we want to remove the event listener from, eventType is a string representing the type of event (e.g., "click", "mouseover") and eventHandlerFunction is the function that was handling the event and should be removed from listening to the event.

Example 1: The below example uses removeEventListener() to Remove Event Handlers in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Remove Event Listener Example</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        #content {
            text-align: center;
            margin: 20px;
        }

        #button-container {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 id="heading">GeeksforGeeks</h1>
    <div id="content"></div>
    <div id="button-container">
        <button id="button">Click me!</button>
    </div>

    <script>
        
          // Get the button element
        const button = document.getElementById('button')

        // Get the content div
        const content = document.getElementById('content')

        // Add event listener to button
        button.addEventListener('click', handleClick)

        // Function to handle button click
        function handleClick() {
            content.textContent = 'GeeksforGeeks is fun'
            
              // Remove event listener from button
            button.removeEventListener('click', handleClick)
        }
    </script>
</body>

</html>

Output:

eventhandler1

Example 2: In the below example, the mousemove and click listner is added. With the click of a button, the mousemove listener is removed and hence the mouse location is not tracked further.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Mousemove Event Example</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        #content {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1 id="heading">GeeksforGeeks</h1>
    <div id="content"></div>
    <div id="content">
        <button id="button">Click me!</button>
    </div>

    <script>
        
          // Get the content div
        const content = document.getElementById('content');
        
          // Get the button element
        const button = document.getElementById('button');
        
          // Function to handle mousemove event
        function handleMouseMove(event) {
            // Add content below heading when mouse moves
            content.textContent = 
              `Mouse is at X: ${event.clientX}, Y: ${event.clientY}`;
        }
        
          // Function to handle button click
        function handleClick() {
            
              // Remove mousemove event listener when button is clicked
            document.removeEventListener('mousemove', handleMouseMove);
        }
        
          // Add mousemove event listener
        document.addEventListener('mousemove', handleMouseMove);
        
          // Add click event listener to button
        button.addEventListener('click', handleClick);
    </script>
</body>

</html>

Output:

eventhandler2

Using Inline Event Handlers

To remove an event handler using inline event handlers in JavaScript, we can directly set the corresponding attribute to an empty string or null. Here, onEventName can be events like onclick, onmouseover, etc. An alert is shown indicating that the button was clicked. After the button is clicked once, the inline event handler is removed by setting onclick to null. This ensures that subsequent clicks on the button won't trigger any action.

Example: The below example uses Inline Event Handlers to Remove Event Handlers in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Remove Inline Event Handler Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        h1 {
            color: green;
            text-align: center;
        }

        #myButton {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #myButton:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <button id="myButton" onclick="handleClick()">
      Click me!
      </button>

    <script>
        
          // Function to handle button click
        function handleClick() {
            alert("Button clicked!");
            
              // Remove inline event handler from button
            document.getElementById('myButton').onclick = null;
        }
    </script>
</body>

</html>

Output:

eventhandler3

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions