共计 4688 个字符，预计需要花费 12 分钟才能阅读完成。
本文是深入浅出 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]);
};本文已收录到集体博客中，欢送关注~
