为何JS中EventListener回调的整数参数变为PointerEvent对象？

问题描述 #

为EventListener的回调函数传入整数参数时出现异常，参数不符合预期。

函数定义：

const deleteTask = function (i) {               
    let temp = [];
    alert (i);  // 弹出内容为 "[object PointerEvent]"
    tasks.forEach((t) => {
        if (t.Id != i)
            temp.push(t);
    });

    tasks = [... temp];
    showTasks();
};

函数调用：

for (let i = 0; i < tasks.length; i++) 
    document.getElementById(`deleteTask${tasks[i].Id}`).addEventListener("click", deleteTask, tasks[i].Id);

无报错信息，但回调收到的参数不是预期的整数，而是事件对象。

问题原因 #

addEventListener的第三个参数并不是传给回调函数的参数，它的正确用途是设置事件监听选项（比如capture、once、passive等布尔值或配置对象）。当触发点击事件时，浏览器会自动把**事件对象（PointerEvent/MouseEvent）**作为第一个参数传给回调函数，所以你在deleteTask里拿到的i实际上是这个事件对象，而非你传入的整数ID。

实现预期参数传递的方法 #

方法1：使用闭包包裹回调 #

在循环中为每个元素创建独立的闭包，把当前的ID保存下来：

for (let i = 0; i < tasks.length; i++) {
    const taskId = tasks[i].Id;
    document.getElementById(`deleteTask${taskId}`).addEventListener("click", function() {
        deleteTask(taskId);
    });
}

方法2：使用bind绑定参数 #

通过Function.prototype.bind把ID绑定到回调函数的参数上，此时事件对象会被放到绑定参数之后：

for (let i = 0; i < tasks.length; i++) {
    const taskId = tasks[i].Id;
    document.getElementById(`deleteTask${taskId}`).addEventListener("click", deleteTask.bind(null, taskId));
}

注意：如果需要在deleteTask中使用事件对象，要把函数定义改成const deleteTask = function (i, event) { ... }，event会作为第二个参数传入。

方法3：利用元素的自定义属性存储ID #

把任务ID存到按钮元素的自定义属性（比如data-task-id）中，在回调里从事件对象中获取：

1. 给按钮添加自定义属性（假设生成按钮时已经设置，或者在循环中补充）：

for (let i = 0; i < tasks.length; i++) {
    const taskId = tasks[i].Id;
    const btn = document.getElementById(`deleteTask${taskId}`);
    btn.dataset.taskId = taskId;
    btn.addEventListener("click", deleteTask);
}

2. 修改deleteTask函数：

const deleteTask = function (event) {               
    const i = parseInt(event.target.dataset.taskId);
    let temp = [];
    alert(i);
    tasks.forEach((t) => {
        if (t.Id != i)
            temp.push(t);
    });

    tasks = [... temp];
    showTasks();
};

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