JavaScript event handling is the core of building dynamic interactive web applications. While basic event handling (e.g., addEventListener) is simple, advanced patterns allow developers to optimize performance, handle complex user interactions, and write easy-to-maintain code.

This article explores advanced event handling patterns in JavaScript and provides practical examples to improve your event handling skills.

1. Event delegation

What is event delegation?

Event delegation refers to attaching a single event listener to a parent element to manage events for its child elements. This mode is particularly useful for elements that are dynamically added to the DOM after the page loads.

Example:

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點擊了子元素：", event.target.textContent);
    }
});

Why use event delegation?

• Reduce the number of event listeners and improve performance.
• Simplify the management of dynamically added elements.

2. Throttle and anti-shake

What are they?

• ThrottlingEnsures that the function is executed at most once within the specified interval.
• AntishakeDelays the execution of a function until a certain amount of time has elapsed since the last event.

Example:

Throttling

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已調(diào)整！");
    }, 200)
);

Anti-Shake

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const searchInput = document.getElementById("search");
searchInput.addEventListener(
    "input",
    debounce(() => {
        console.log("輸入事件觸發(fā)！");
    }, 300)
);

Why use them?

• Improve performance by reducing redundant function calls, especially during high-frequency events such as resizing or scrolling.

3. Custom event emitter

What are they?

Custom event emitters allow developers to create, dispatch and listen to their own events for increased modularity.

const eventEmitter = {
    events: {},
    on(event, listener) {
        if (!this.events[event]) this.events[event] = [];
        this.events[event].push(listener);
    },
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach((listener) => listener(data));
        }
    },
};

eventEmitter.on("dataReceived", (data) => {
    console.log("收到數(shù)據(jù)：", data);
});

eventEmitter.emit("dataReceived", { id: 1, message: "Hello!" });

Why use them?

• Enhanced modularization and decoupling of components.
• Facilitates communication between different parts of the application.

4. One-time event handling

What is one-time event processing?

Sometimes you only need an event handler to execute once. Modern JavaScript provides an elegant way to handle this problem.

Example

const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按鈕被點擊！");
    },
    { once: true }
);

Why use it?

• Simplify the logic of one-time events.
• Avoid memory leaks by automatically removing listeners.

5. Event handler combination

What is event handler composition?

Event handler composition involves combining multiple handlers to handle events sequentially.

Example

function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("點擊：", event.target);
}

function changeBackground(event) {
    event.target.style.backgroundColor = "yellow";
}

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);

Why use it?

• Keep handlers small and reusable.
• Promote clean and maintainable code.

6. Capture and Bubbling

What are they?

JavaScript event flow is divided into two stages:

• Capture phase: Events flow from the root element to the target element.
• Bubbling phase: Events flow from the target element back to the root element.

Example

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點擊了子元素：", event.target.textContent);
    }
});

Why use it?

• Provides flexibility in managing event propagation.

7. Block default behavior and stop propagation

What are they?

• preventDefault() Prevent default browser actions (e.g. form submission).
• stopPropagation() Prevents events from propagating to other listeners.

Example

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已調(diào)整！");
    }, 200)
);

Why use it?

• Provides finer control over event behavior.

Conclusion

Advanced event handling patterns are essential for building efficient, interactive, and easy-to-maintain JavaScript applications. By mastering techniques like event delegation, throttling, custom emitters, and propagation controls, you can tackle complex use cases with ease.

The above is the detailed content of Advanced Event Handling Patterns in JavaScript. For more information, please follow other related articles on the PHP Chinese website!