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