How to reuse event handler functions?

To reuse event handler functions in JavaScript, you can define the event handler as a named function and then attach it to multiple elements or events as needed. Here’s how to do it:

Step-by-Step Guide

Define the Event Handler Function: Create a named function that contains the logic you want to execute when the event occurs.
Attach the Event Handler: Use addEventListener to attach the same function to multiple elements or events.

Example

Here’s an example demonstrating how to reuse an event handler function:

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<div id="message"></div>

<script>
    // Step 1: Define the event handler function
    function handleButtonClick(event) {
        const messageDiv = document.getElementById("message");
        messageDiv.textContent = `You clicked: ${event.target.textContent}`;
    }

    // Step 2: Attach the event handler to multiple elements
    const button1 = document.getElementById("button1");
    const button2 = document.getElementById("button2");

    button1.addEventListener("click", handleButtonClick);
    button2.addEventListener("click", handleButtonClick);
</script>

Explanation

Event Handler Function: The handleButtonClick function is defined once and contains the logic to handle the button click event.
Attaching to Multiple Elements: The same function is attached to both button1 and button2. When either button is clicked, the same function will execute, and it will display which button was clicked.

Benefits of Reusing Event Handlers

Code Reusability: You avoid duplicating code, making it easier to maintain and update.
Consistency: The same logic is applied across multiple elements, ensuring consistent behavior.
Simplified Maintenance: If you need to change the event handling logic, you only need to update it in one place.

By following this approach, you can effectively reuse event handler functions across different elements and events in your JavaScript code.