vue-compositions

useEvent

用于监听事件的 Hook

TIP

会在组件卸载时自动解绑事件，当 target 为 Ref 时，target 变化时也会自动解绑事件

API 

const [target, clear] = useEvent(event, cb, options, (target = window))

Params

参数名描述类型默认值
event事件名string
cb事件监听回调Function
options传递给 addEventListener 和 removeEventListener 的第三个参数boolean | AddEventListenerOptions
target绑定事件的目标EventTarget | Ref<EventTarget | null> | stringWindow

Result

参数说明类型
target事件绑定的目标对象EventTarget | null
clear用于解绑事件() => void

Example

target 为 css 选择器

target 为 Ref

target 为 DOM 对象

Code 

<template>
  <div>
    <p>target 为 css 选择器</p>
    <button id="target">click</button>
  </div>
  <div>
    <p>target 为 Ref</p>
    <button ref="target">click</button>
  </div>
  <div>
    <p>target 为 DOM 对象</p>
    <button id="test">click</button>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { useEvent } from 'vue-compositions'
export default {
  setup() {
    const target = ref(null)
    const handler = () => alert('click')
    useEvent('click', handler, true, '#target')
    useEvent('click', handler, true, target)
    onMounted(() => {
      useEvent('click', handler, true, document.getElementById('test'))
    })
    return {
      target
    }
  }
}
</script>