如何向eventListener绑定的moveAbleBoxes函数传参并移除该监听器？

这是个很常见的场景——既要给事件处理函数传递自定义参数，又要保证之后能顺利移除监听器，还不能用匿名函数（毕竟匿名函数没法被引用移除）。我给你分享几个可靠的实现方案：

方案1：使用Function.prototype.bind()并保存绑定后的函数引用 #

bind()方法会创建一个新的绑定函数，这个函数会预先带上你想传递的参数，同时我们需要把这个新函数的引用存起来，这样移除监听器时就能直接用它。

// 你的目标处理函数，最后要预留event参数接收事件对象
function moveAbleBoxes(boxId, direction, event) {
  console.log(`移动盒子 ${boxId} 向 ${direction}`, event.target);
  // 这里写你的业务逻辑
}

// 创建绑定了参数的函数，并保存引用
// 第一个参数是this指向，不需要的话传null即可，后面是要传递的自定义参数
const boundMoveHandler = moveAbleBoxes.bind(null, 'box1', 'right');

// 添加事件监听器
document.getElementById('controlBtn').addEventListener('click', boundMoveHandler);

// 后续需要移除时，直接用保存的引用
document.getElementById('controlBtn').removeEventListener('click', boundMoveHandler);

方案2：用闭包创建带参数的处理函数工厂 #

通过闭包封装参数，返回一个可被引用的事件处理函数，这种方式比bind更灵活，适合需要复杂参数处理的场景。

// 定义一个工厂函数，接收你要传递的参数
function createMoveHandler(boxId, direction) {
  // 返回的函数作为事件处理函数，自动接收event参数
  return function(event) {
    // 在这里调用你的目标函数，传入闭包保存的参数和事件对象
    moveAbleBoxes(boxId, direction, event);
  };
}

// 创建处理函数并保存引用
const moveHandler = createMoveHandler('box2', 'left');

// 添加监听
document.querySelector('.target-box').addEventListener('mousemove', moveHandler);

// 移除监听
document.querySelector('.target-box').removeEventListener('mousemove', moveHandler);

方案3：利用元素的dataset存储参数（适合参数与元素绑定的场景） #

如果你的参数和触发事件的元素强相关，可以把参数存在元素的data-*属性里，处理函数直接从事件对象中读取参数，这样不需要额外创建函数引用，原函数就能直接复用。

<!-- 在元素上定义参数 -->
<div class="target-box" data-box-id="box3" data-move-direction="up"></div>

// 处理函数直接从event.target的dataset中读取参数
function moveAbleBoxes(event) {
  const boxId = event.target.dataset.boxId;
  const direction = event.target.dataset.moveDirection;
  console.log(`移动盒子 ${boxId} 向 ${direction}`);
  // 业务逻辑
}

// 添加监听，直接使用原函数
document.querySelector('.target-box').addEventListener('click', moveAbleBoxes);

// 移除监听，同样直接使用原函数
document.querySelector('.target-box').removeEventListener('click', moveAbleBoxes);

核心关键点总结 #

• 移除事件监听器的前提是：必须使用添加监听器时的同一个函数引用，这也是不能用匿名函数的原因（匿名函数每次都是全新的引用）。
• 前两种方案都是通过创建一个可被引用的“中间函数”，携带自定义参数；第三种方案则是把参数和元素绑定，让原函数通用化。

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