useEventListener

輕鬆使用 EventListener。

Usage

即時編輯器

function Demo() {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [state, setState] = useState("未雙擊");

  const onDBClick = () => {
    setState("已雙擊");
  };

  const onClick = (event: Event) => {
    console.log("按鈕被點擊！", event);
  };

  const onVisibilityChange = (event: Event) => {
    console.log("文檔可見性已更改！", {
      isVisible: !document.hidden,
      event,
    });
  };

  // example with window based event
  useEventListener("dblclick", onDBClick);

  // example with document based event
  useEventListener("visibilitychange", onVisibilityChange, () => document);

  // example with element based event
  useEventListener("click", onClick, buttonRef);

  return (
    <div>
      <p>{state}</p>
      <button ref={buttonRef}>點擊我</button>
    </div>
  );
};

結果

未雙擊

API

useEventListener

Returns

void

Arguments

參數名	描述	類型	預設值
eventName	事件名称	string (必填)	-
handler	事件处理器	(event: any) => void (必填)	-
element	dom元素	EventTarget | Element | Document | HTMLElement | Window | null | undefined	window
options	监听选项	boolean | AddEventListenerOptions | undefined	-