本文是深入浅出 ahooks 源码系列文章的第十四篇，该系列已整顿成文档-地址。感觉还不错，给个 star 反对一下哈，Thanks。

上一篇咱们探讨了 ahooks 对 DOM 类 Hooks 应用标准，以及源码中是如何去做解决的。接下来咱们就针对对于 DOM 的各个 Hook 封装进行解读。

useEventListener

优雅的应用 addEventListener。

咱们先来看看 addEventListener 的定义，以下来自 MDN 文档：

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

这里的 EventTarget 能够是一个文档上的元素 Element,Document和Window 或者任何其余反对事件的对象 (比方 XMLHttpRequest)。

咱们看 useEventListener 函数 TypeScript 定义，通过类型重载，它对 Element、Document、Window 等元素以及其事件名称和回调参数都做了定义。

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;function useEventListener(eventName: string, handler: noop, options: Options): void;

外部代码比较简单：

  • 判断是否反对 addEventListener，反对则将参数进行传递。能够注意正文中的几个参数的作用，当做温习，这里不开展细说。
  • useEffect 的返回逻辑，也就是组件卸载的时候，会主动革除事件监听器，防止产生内存泄露。
function useEventListener(  // 事件名称  eventName: string,  // 处理函数  handler: noop,  // 设置  options: Options = {},) {  const handlerRef = useLatest(handler);  useEffectWithTarget(    () => {      const targetElement = getTargetElement(options.target, window);      if (!targetElement?.addEventListener) {        return;      }      const eventListener = (event: Event) => {        return handlerRef.current(event);      };      // 监听事件      targetElement.addEventListener(eventName, eventListener, {        // listener 会在该类型的事件捕捉阶段流传到该 EventTarget 时触发。        capture: options.capture,        // listener 在增加之后最多只调用一次。如果是 true，listener 会在其被调用之后主动移除。        once: options.once,        // 设置为 true 时，示意 listener 永远不会调用 preventDefault() 。如果 listener 依然调用了这个函数，客户端将会疏忽它并抛出一个控制台正告        passive: options.passive,      });      // 移除事件      return () => {        targetElement.removeEventListener(eventName, eventListener, {          capture: options.capture,        });      };    },    [eventName, options.capture, options.once, options.passive],    options.target,  );}

useClickAway

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

提到这个的利用场景，应该是模态框，点击内部暗影局部，主动敞开的场景。那这里它是怎么实现的呢？

首先它反对传递 DOM 节点或者 Ref，并且是反对数组形式。
事件默认是反对 click，开发者能够自行传递并反对数组形式。

export default function useClickAway<T extends Event = Event>(  // 触发函数  onClickAway: (event: T) => void,  // DOM 节点或者 Ref，反对数组  target: BasicTarget | BasicTarget[],  // 指定须要监听的事件，反对数组  eventName: string | string[] = 'click',) {}

而后外部通过 document.addEventListener 监听事件。组件卸载的时候革除事件监听。

// 事件列表const eventNames = Array.isArray(eventName) ? eventName : [eventName];// document.addEventListener 监听事件，通过事件代理的形式晓得指标节点eventNames.forEach((event) => document.addEventListener(event, handler));return () => {  eventNames.forEach((event) => document.removeEventListener(event, handler));};

最初看 handler 函数，通过 event.target 获取到触发事件的对象 (某个 DOM 元素) 的援用，判断如果不在传入的 target 列表中，则触发定义好的 onClickAway 函数。

const handler = (event: any) => {  const targets = Array.isArray(target) ? target : [target];  if (    // 判断点击的 DOM Target 是否在定义的 DOM 元素（列表）中    targets.some((item) => {      const targetElement = getTargetElement(item);      return !targetElement || targetElement.contains(event.target);    })  ) {    return;  }  // 触发点击事件  onClickAwayRef.current(event);};

小结一下，useClickAway 就是应用了事件代理的形式，通过 document 监听事件，判断触发事件的 DOM 元素是否在 target 列表中，从而决定是否要触发定义好的函数。

useEventTarget

常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，反对自定义值转换和重置性能。

间接看代码，比较简单，其实就是监听表单的 onChange 事件，拿到值后更新 value 值，更新的逻辑反对自定义。

function useEventTarget<T, U = T>(options?: Options<T, U>) {  const { initialValue, transformer } = options || {};  const [value, setValue] = useState(initialValue);  // 自定义转换函数  const transformerRef = useLatest(transformer);  const reset = useCallback(() => setValue(initialValue), []);  const onChange = useCallback((e: EventTarget<U>) => {    // 获取 e.target.value 的值，并进行设置    const _value = e.target.value;    if (isFunction(transformerRef.current)) {      return setValue(transformerRef.current(_value));    }    // no transformer => U and T should be the same    return setValue(_value as unknown as T);  }, []);  return [    value,    {      onChange,      reset,    },  ] as const;}

useTitle

用于设置页面题目。

这个页面题目指的是浏览器 Tab 中展现的。通过 document.title 设置。

代码非常简单，一看就会：

function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {  const titleRef = useRef(isBrowser ? document.title : '');  useEffect(() => {    document.title = title;  }, [title]);  useUnmount(() => {    // 组件卸载后，复原上一次的 title    if (options.restoreOnUnmount) {      document.title = titleRef.current;    }  });}

useFavicon

设置页面的 favicon。

favicon 指的是页面 Tab 的这个 ICON。

原理是通过 link 标签设置 favicon。

const useFavicon = (href: string) => {  useEffect(() => {    if (!href) return;    const cutUrl = href.split('.');    const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;    const link: HTMLLinkElement =      document.querySelector("link[rel*='icon']") || document.createElement('link');    // 用于定义链接的内容的类型。    link.type = ImgTypeMap[imgSuffix];    // 指定被链接资源的URL。    link.href = href;    // 此属性命名链接文档与以后文档的关系。    link.rel = 'shortcut icon';    document.getElementsByTagName('head')[0].appendChild(link);  }, [href]);};

本文已收录到集体博客中，欢送关注~