【解读 ahooks 源码系列】DOM篇（一）

╰半橙微兮° 2023-09-25 00:24 32阅读 0赞

### useEventListener ###

优雅的使用 addEventListener。

*  [官方文档][Link 1]

#### 用法 ####

import React, { useState, useRef } from 'react';
    import { useEventListener } from 'ahooks';
    
    export default () => {
      const [value, setValue] = useState(0);
      const ref = useRef(null);
    
      useEventListener(
        'click',
        () => {
          setValue(value + 1);
        },
        { target: ref },
      );
    
      return (
        <button ref={ref} type="button">
          You click {value} times
        </button>
      );
    };
    复制代码

#### 使用场景 ####

通用事件监听 Hook，简化写法（无需在 useEffect 卸载函数中手动移除监听函数，由内部去移除）

#### 实现思路 ####

1.  判断是否支持 addEventListener
2.  在单独只有 useEffect 实现事件监听移除的基础上，将相关参数都由外部传入，并添加到依赖项
3.  处理事件参数的 TS 类型，addEventListener 的第三个参数也需要由外部传入

#### 核心实现 ####

*  [EventTarget.addEventListener()][EventTarget.addEventListener]：将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行

EventTarget 指任何其他支持事件的对象/元素 `HTMLElement | Element | Document | Window`

符合 EventTarget 接口的都具有下列三个方法

EventTarget.addEventListener()
    EventTarget.removeEventListener()
    EventTarget.dispatchEvent()
    复制代码

*  TS 函数重载

> 函数重载指使用相同名称和不同参数数量或类型创建多个方法，让我们定义以多种方式调用的函数。在 TS 中为同一个函数提供多个函数类型定义来进行函数重载

function useEventListener<K extends keyof HTMLElementEventMap>(
      eventName: K,
      handler: (ev: HTMLElementEventMap[K]) => void,
      options?: Options<HTMLElement>,
    ): void;
    function useEventListener<K extends keyof ElementEventMap>(
      eventName: K,
      handler: (ev: ElementEventMap[K]) => void,
      options?: Options<Element>,
    ): void;
    function useEventListener<K extends keyof DocumentEventMap>(
      eventName: K,
      handler: (ev: DocumentEventMap[K]) => void,
      options?: Options<Document>,
    ): void;
    function useEventListener<K extends keyof WindowEventMap>(
      eventName: K,
      handler: (ev: WindowEventMap[K]) => void,
      options?: Options<Window>,
    ): void;
    复制代码

实现：

[完整源码][Link 2]

### useClickAway ###

监听目标元素外的点击事件。

*  [官方文档][Link 3]

type Target = Element | (() => Element) | React.MutableRefObject<Element>;
    
    /**
     * 监听目标元素外的点击事件。
     * @param onClickAway 触发函数
     * @param target DOM 节点或者 Ref，支持数组
     * @param eventName DOM 节点或者 Ref，支持数组，默认事件是 click
     */
    useClickAway<T extends Event = Event>(
      onClickAway: (event: T) => void,
      target: Target | Target[],
      eventName?: string | string[]
    );
    复制代码

#### 用法 ####

import React, { useState, useRef } from 'react';
    import { useClickAway } from 'ahooks';
    
    export default () => {
      const [counter, setCounter] = useState(0);
      const ref = useRef<HTMLButtonElement>(null);
      useClickAway(() => {
        setCounter((s) => s + 1);
      }, ref);
    
    
      return (
        <div>
          <button ref={ref} type="button">

[Link 1]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-event-listener
[EventTarget.addEventListener]: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FEventTarget%2FaddEventListener
[Link 2]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falibaba%2Fhooks%2Fblob%2Fv3.7.4%2Fpackages%2Fhooks%2Fsrc%2FuseEventListener%2Findex.ts
[Link 3]: https://link.juejin.cn?target=https%3A%2F%2Fahooks.js.org%2Fzh-CN%2Fhooks%2Fuse-click-away