当前位置：首页 > React

react如何监听document

2026-03-31 05:43:57React

监听 document 事件的方法

在 React 中监听 document 对象的事件（如点击、滚动、键盘事件等）可以通过以下方式实现：

使用 useEffect 添加和移除事件监听

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleKeyDown = (event) => {
      console.log('Key pressed:', event.key);
    };

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return <div>Press any key to see console output</div>;
}

监听点击事件

useEffect(() => {
  const handleClick = (event) => {
    console.log('Clicked on:', event.target);
  };

  document.addEventListener('click', handleClick);

  return () => {
    document.removeEventListener('click', handleClick);
  };
}, []);

监听滚动事件

useEffect(() => {
  const handleScroll = () => {
    console.log('Window scrolled:', window.scrollY);
  };

  document.addEventListener('scroll', handleScroll);

  return () => {
    document.removeEventListener('scroll', handleScroll);
  };
}, []);

注意事项

清理事件监听器：在 useEffect 的返回函数中移除事件监听器，避免内存泄漏。
依赖数组：如果事件处理函数依赖组件状态或 props，需要将其添加到依赖数组中，或者使用 useCallback 缓存函数。

示例：依赖状态的监听

const [count, setCount] = useState(0);

useEffect(() => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      setCount(prev => prev + 1);
    }
  };

  document.addEventListener('keydown', handleKeyDown);

  return () => {
    document.removeEventListener('keydown', handleKeyDown);
  };
}, [setCount]); // 依赖 setCount

自定义 Hook 封装

可以将事件监听逻辑封装为自定义 Hook，方便复用：

import { useEffect } from 'react';

function useDocumentEvent(eventName, handler, dependencies = []) {
  useEffect(() => {
    document.addEventListener(eventName, handler);

    return () => {
      document.removeEventListener(eventName, handler);
    };
  }, dependencies);
}

// 使用示例
function MyComponent() {
  const handleKeyDown = (event) => {
    console.log('Key pressed:', event.key);
  };

  useDocumentEvent('keydown', handleKeyDown);

  return <div>Press any key</div>;
}

事件委托优化

如果需要在多个组件中监听同一事件，可以使用事件委托减少监听器数量：

react如何监听document

useEffect(() => {
  const handleGlobalClick = (event) => {
    if (event.target.matches('.my-button')) {
      console.log('Button clicked');
    }
  };

  document.addEventListener('click', handleGlobalClick);

  return () => {
    document.removeEventListener('click', handleGlobalClick);
  };
}, []);

以上方法适用于 React 函数组件。类组件可以通过 componentDidMount 和 componentWillUnmount 实现类似逻辑。