事件监听器

相关方法

说明

useEventListener 用于优雅地管理事件监听器。

它结合了 Vue 的生命周期，在组件挂载时自动注册监听器，卸载时自动移除，避免内存泄漏。支持监听 window 对象或 Vue 的 Ref 元素。

类型定义

// 重载1：监听 Window 事件
function useEventListener<K extends keyof WindowEventMap>(
  type: K,
  listener: (event: WindowEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions,
): WatchStopHandle;

// 重载2：监听特定元素事件
function useEventListener<K extends keyof HTMLElementEventMap>(
  target: Ref<HTMLElement>,
  type: K,
  listener: (event: HTMLElementEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions,
): WatchStopHandle;

参数说明

参数	类型	默认值	说明
target	Ref<HTMLElement>	window	(可选) 需要监听的目标元素 Ref。如果不传，默认监听 window
type	string	-	事件名称，如 'click', 'resize', 'keydown' 等
listener	Function	-	事件触发时的回调函数
options	boolean | object	-	可选。传递给 addEventListener 的选项对象或布尔值

代码示例

监听 Window 事件

import { useEventListener } from '@vue3-simple-bui/platform';

// 监听窗口大小改变
useEventListener('resize', (event) => {
  console.log('Window resized!', window.innerWidth, window.innerHeight);
});

// 监听键盘按下
useEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Enter key pressed');
  }
});

监听元素事件

import { ref } from 'vue';
import { useEventListener } from '@vue3-simple-bui/platform';

const buttonRef = ref<HTMLElement>();

// 监听按钮点击
useEventListener(buttonRef, 'click', (event) => {
  console.log('Button clicked!', event.target);
});

手动停止监听

虽然 useEventListener 会自动清理，但你也可以通过返回值手动停止监听。

import { useEventListener } from '@vue3-simple-bui/platform';

const stop = useEventListener('mousemove', (e) => {
  console.log(e.clientX, e.clientY);
});

// 在某个时刻手动停止监听
stop();