跳到主要内容

EventProxy

EventProxy 可以托管 web 元素的事件， EventProxy 本质上是 SyncEvent 的封装

所以 EventProxy 具有几乎所有 SyncEvent 的方法，除了emit

初始化​

import { EventProxy } from "ocev"

// 请确保 element 可以 addEventListener 和 removeEventListener, 理论上 web 元素都可以

EventProxy.new(element) // 或者 new EventProxy(element)

使用方法​

  const divRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 完整的类型提示
    return EventProxy.new(divRef.current!)
      .on("click", (ev) => {})
      .on("mouseenter", (ev) => {})
      .on("mouseleave", (ev) => {})
  }, [])

  return <div ref={divRef}></div>

监听所有的事件​

两种方式监听

EventProxy.new(element, { proxyAllEvent: true }).any((event) => {
  console.log(event, "trigger")
})

或者

EventProxy.new(element).proxyAllEvent().any((event) => {
  console.log(event, "trigger")
})

在 react 中你可以这么写

  const divRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 完整的类型提示
    return EventProxy.new(divRef.current!)
      .on("click", (ev) => {})
      .on("mouseenter", (ev) => {})
      .on("mouseleave", (ev) => {})
  }, [])

  return <div ref={divRef}></div>

可选的配置​

EventProxy.new(divRef.current!, {
  proxyAllEvent: true,
  addEventListenerOptions: {
    passive: true,
  }, // 和 addEventListener 的参数保持一致
})

获取原本的元素​

const div = document.createElement('div')
EventProxy.new(div).element === div

销毁​

EventProxy.new(element).destroy() // 清理所有的事件注册