> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/useeventlistener.md).

# useEventListener

#### 基础用法

```html
<template>
  <div>
    <p>You clicked the button {{ count }} times</p>
    <button ref="buttonRef">Click me</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useEventListener } from "hooks-vue3";
const count = ref(0);
const buttonRef = ref(null);

function handleClick() {
  count.value++;
}

// Add event listener using our hook
useEventListener("click", handleClick, {
  target: buttonRef,
});

</script>
```

### API

```typescript
useEventListener("click", ()=>void, {
  target,
});
```

### 参数

```typescript

type Target<T> = T | (() => T) | Ref<T> | Window | Document;

type Options = {
  target?: Target<Element | null>;
  capture?: boolean;
  passive?: boolean;
};

function useEventListener(
  type: string,
  listener: EventListener,
  options?: Options,
): (() => void) 
```