如何为JavaScript事件函数添加除事件对象外的额外参数

AI 小北

2026-10-1

实现方案

你可以通过以下几种常用方式实现事件回调传自定义参数，按需选择即可：

方案1：匿名函数包裹（无需解绑时首选）

addEventListener的回调参数传入一个匿名函数，事件触发时会自动把事件对象e传给这个匿名函数，你在匿名函数内部手动调用目标函数，同时传入自定义参数即可：

window.addEventListener('click', function(e) {
  // 第二个参数2就是你要传入的scalar，可按需修改为任意值
  give_mouse_coord(e, 2);
}, false);

这个写法最简单直观，不需要修改原有函数结构，适合不需要后续解绑事件的场景。

方案2：命名回调函数（需要解绑时使用）

如果后续需要调用removeEventListener解绑事件，匿名函数无法被匹配解绑，你可以定义一个命名的回调函数来处理：

const customScalar = 2;
// 定义命名回调
const handleClick = (e) => give_mouse_coord(e, customScalar);
// 绑定事件
window.addEventListener('click', handleClick, false);

// 后续需要解绑时直接调用即可
// window.removeEventListener('click', handleClick, false);

方案3：使用bind方法预设参数

你也可以用Function.prototype.bind方法预先给函数注入自定义参数，注意这种方式下bind预设的参数会排在事件对象前面，需要调整原有函数的参数顺序：

// 调整参数顺序：自定义参数在前，事件对象在后
function give_mouse_coord(scalar, e) {
    var pos = getMousePos(canvas, e);
    var pos_x = pos.x * scalar;
    var pos_y = pos.y * scalar;
}
// 预设scalar参数为2，bind第一个参数为函数运行时的this指向，不需要修改可传null
const boundGiveMouseCoord = give_mouse_coord.bind(null, 2);
window.addEventListener('click', boundGiveMouseCoord, false);

// 解绑方式
// window.removeEventListener('click', boundGiveMouseCoord, false);