DOM 事件

DOM 事件绑定与处理工具函数。

---

on

添加事件监听器。

已废弃

推荐使用原生 element.addEventListener 替代。

function on(
  element: HTMLElement | Document | Window,
  event: string,
  handler: EventListenerOrEventListenerObject,
  useCapture?: boolean
): void

参数

参数	说明	类型	默认值
element	目标元素	HTMLElement | Document | Window	—
event	事件名	string	—
handler	事件处理函数	EventListenerOrEventListenerObject	—
useCapture	是否捕获阶段触发	boolean	false

示例

import { on } from 'ljf-utils'

const btn = document.querySelector('#btn')
on(btn, 'click', (e) => {
  console.log('clicked', e)
})

---

off

移除事件监听器。

已废弃

推荐使用原生 element.removeEventListener 替代。

function off(
  element: HTMLElement | Document | Window,
  event: string,
  handler: EventListenerOrEventListenerObject,
  useCapture?: boolean
): void

示例

import { off } from 'ljf-utils'

const handler = (e) => console.log('clicked', e)
on(btn, 'click', handler)
// 后续移除
off(btn, 'click', handler)

---

once

添加一次性事件监听，触发后自动移除。

已废弃

推荐使用 addEventListener 的 { once: true } 选项替代。

function once(
  el: HTMLElement,
  event: string,
  fn: EventListener
): void

示例

import { once } from 'ljf-utils'

once(btn, 'click', () => {
  console.log('只触发一次')
})

---

composeEventHandlers

组合多个事件处理函数，按顺序执行。支持 defaultPrevented 检查。

function composeEventHandlers<E>(
  theirsHandler?: (event: E) => boolean | void,
  oursHandler?: (event: E) => void,
  options?: { checkForDefaultPrevented?: boolean }
): (event: E) => void

参数

参数	说明	类型	默认值
theirsHandler	先执行的处理函数	(event: E) => boolean | void	—
oursHandler	后执行的处理函数	(event: E) => void	—
options.checkForDefaultPrevented	是否检查 defaultPrevented	boolean	true

示例

import { composeEventHandlers } from 'ljf-utils'

const handleClick = composeEventHandlers(
  (e) => {
    // 外部处理
    console.log('external handler')
  },
  (e) => {
    // 内部处理
    console.log('internal handler')
  }
)

// 用于组件事件合并
<button onClick={handleClick}>Click me</button>