useEventListener
优雅的使用 addEventListener。
代码演示
基础用法
点击查看代码
<script setup>
import { useEventListener } from "ahooks-for-vue";
import { ref } from "vue";
const num = ref(1);
const domRef = ref(null);
useEventListener(
"click",
() => {
num.value += 1;
},
{
target: domRef,
}
);
</script>
<template>
<div class="a">
<button ref="domRef">click:{{ num }}</button>
</div>
</template>
<style></style>
监听 keydown 事件
Your press key is :
-
点击查看代码
<script setup>
import { useEventListener } from "ahooks-for-vue";
import { ref } from "vue";
const key = ref("");
const { restart, stop } = useEventListener("keydown", (ev) => {
key.value = ev.key;
});
</script>
<template>
<div>Your press key is :{{ key }}</div>
<br />
<br />
<button @click="restart">重新开始监听</button>-<button @click="stop">
移除监听
</button>
</template>
<style></style>
API
useEventListener(
eventName: string,
handler: (ev: Event) => void,
options?: Options,
);
Params
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
eventName | 事件名称 | string | - |
handler | 处理函数 | (ev: Event) => void | - |
options | 设置(可选) | Options | - |
Options
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
target | DOM 节点或者 ref | (() => Element) | Element | Ref<Element> | Window | Document | window |
capture | 可选项,listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 | boolean | false |
once | 可选项,listener 在添加之后最多只调用一次。如果是 true,listener 会在其被调用之后自动移除。 | boolean | false |
passive | 可选项,设置为 true 时,表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。 | boolean | false |
Result 相比ahooks新增的APi
参数 | 说明 | 类型 |
---|---|---|
restart | 重新开始监听函数 | () => void |
stop | 移除监听函数 | () => void |