common-hook/es/dom/useEventListener.js

提供项目中常用的 React Hooks

import { useLatest } from "common-hook";
import { getTargetElement } from "../_utils/domTarget";
import useEffectWithTarget from "../_utils/useEffectWithTarget";
/**
 * @name 事件监听
 * @description 优雅的使用 addEventListener
 * @example
 * useEventListener('click',
 * () => {setValue(value + 1)}
 * ,{ target: ref });
 */
export const useEventListener = (eventName, handler, options = {}) => {
    const handlerRef = useLatest(handler);
    useEffectWithTarget(() => {
        const targetElement = getTargetElement(options.target, window);
        if (!(targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener)) {
            return;
        }
        const eventListener = (event) => {
            return handlerRef.current(event);
        };
        targetElement.addEventListener(eventName, eventListener, {
            capture: options.capture,
            once: options.once,
            passive: options.passive
        });
        return () => {
            targetElement.removeEventListener(eventName, eventListener, {
                capture: options.capture
            });
        };
    }, [eventName, options.capture, options.once, options.passive], options.target);
};