如何向外部定义的eventListener函数传递事件对象e及自定义参数

直接传入函数引用时的事件对象获取 #

当你使用input.addEventListener('keyup', func)这种直接传函数引用的写法时，事件对象e不需要手动传递，会被浏览器自动作为第一个参数传入func，和匿名函数写法里拿到的事件对象完全一致。
示例代码：

// 提前定义处理函数，第一个形参直接接收自动传入的事件对象
function handleKeyUp(e) {
  console.log('按下的键码：', e.keyCode);
  console.log('触发事件的元素：', e.target);
}

// 直接绑定函数引用即可，不要加括号（加括号会立即执行函数，导致绑定失效）
input.addEventListener('keyup', handleKeyUp);

需要传递自定义参数的实现方案 #

如果除了事件对象之外，还要传入额外的自定义参数，有两种常用的可靠实现方式：

• 方案1：使用匿名函数包裹（最通用、可读性最高）
  在外层写一个浏览器原生支持的事件回调（匿名普通函数/箭头函数都可以），在这个回调内部调用你提前定义的处理函数，同时把自动拿到的事件对象、自定义参数按顺序传入即可。
  示例代码：

  // 自定义参数
  const searchType = 'goods';
  const pageSize = 20;
  
  // 提前定义的处理函数，按顺序接收参数
  function handleSearchKeyUp(e, type, size) {
    console.log('事件对象：', e);
    console.log('搜索类型：', type);
    console.log('每页条数：', size);
    // 实际业务逻辑
    if (e.key === 'Enter') {
      doSearch(e.target.value, type, size);
    }
  }
  
  // 绑定事件
  input.addEventListener('keyup', function(e) {
    // 内部调用自定义处理函数，按顺序传参
    handleSearchKeyUp(e, searchType, pageSize);
  });
  

  注意：如果后续需要移除该事件监听，需要把这个匿名回调提前存为具名变量，否则无法通过removeEventListener精准移除。

• 方案2：使用Function.prototype.bind预绑定参数
  利用bind方法可以预先给函数绑定参数的特性，提前传入自定义参数，注意参数顺序：bind预先绑定的参数会排在形参列表的最前面，事件对象会被放到所有预绑定参数的最后传入。
  示例代码：

  const searchType = 'shop';
  const pageSize = 10;
  
  function handleSearchKeyUp(type, size, e) {
    // 注意参数顺序：先拿预绑定的自定义参数，最后才是事件对象
    console.log('搜索类型：', type);
    console.log('每页条数：', size);
    console.log('键码：', e.keyCode);
  }
  
  // bind第一个参数是函数执行时的this指向，不需要改this就传null即可
  const boundHandler = handleSearchKeyUp.bind(null, searchType, pageSize);
  input.addEventListener('keyup', boundHandler);
  
  // 后续移除监听直接用存好的boundHandler引用即可
  // input.removeEventListener('keyup', boundHandler);
  

  注意：bind每次执行都会返回一个全新的函数引用，所以必须把bind返回的函数提前存成变量，否则后续移除监听会失效，也不要直接在addEventListener里写func.bind(xxx)后再在移除时重复写一遍func.bind(xxx)，两次生成的引用不同，无法成功移除。

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