JavaScript如何为同一元素的不同事件绑定同一处理函数并传参

实现方案 #

方案1：高阶函数封装（支持自定义传参，可复用性最高） #

通过工厂函数提前把元素、自定义配置存入闭包，返回统一的事件处理函数，同时支持批量绑定事件，避免重复编码：

// 事件处理工厂，可传入元素、切换类名等自定义参数
function createHoverHandler(targetElement, toggleClassName = 'shadow') {
  // 返回实际绑定的事件回调
  return function (event) {
    event.type === 'mouseenter'
      ? targetElement.classList.add(toggleClassName)
      : targetElement.classList.remove(toggleClassName)
    console.log(event)
  }
}

const divElement = document.querySelector('#test')
// 生成复用的处理函数实例
const commonHandler = createHoverHandler(divElement)
// 批量绑定多个事件
['mouseenter', 'mouseleave'].forEach(eventName => {
  divElement.addEventListener(eventName, commonHandler, false)
})

这个方案满足你需要传元素参数、同一处理函数绑定多事件的需求，后续如果要调整逻辑只需要修改工厂函数内部代码即可，抽象度和可扩展性都很高。

方案2：利用event.currentTarget轻量实现 #

如果不需要额外传递自定义参数，也可以直接通过事件对象自带的currentTarget属性获取绑定事件的元素，无需额外传参：

// 全局复用的处理函数
function commonHoverHandler(event) {
  // currentTarget始终指向绑定事件的元素，无需手动传入
  const targetElement = event.currentTarget
  event.type === 'mouseenter'
    ? targetElement.classList.add('shadow')
    : targetElement.classList.remove('shadow')
  console.log(event)
}

const divElement = document.querySelector('#test')
['mouseenter', 'mouseleave'].forEach(eventName => {
  divElement.addEventListener(eventName, commonHoverHandler, false)
})

内容的提问来源于stack exchange，提问作者Musicman