JavaScript事件处理：事件参数后定义参数及this绑定错误问题

云原生阿岚

2026-7-14

事件绑定参数传递与preventDefault报错解决方案

问题根源

你当前代码的核心问题有两个：

addEventListener("click", selectTime(this, x))是直接执行了selectTime函数，而非将函数作为回调传递。这导致循环时selectTime就立刻运行，此时传入的this不是事件对象，自然没有preventDefault方法，触发报错。
没有正确实现“给selectTime传递item参数同时保留事件对象”的需求。

修正方案

以下两种方法都能解决问题，按需选择：

方法一：箭头函数包裹回调

用箭头函数作为事件回调，点击触发时再调用selectTime，同时传递事件对象和item：

let testTime = document.querySelectorAll(".testTime"); // 包含3个对应30、60、120的元素
testTime.forEach((x) => {
    console.log(x.innerHTML);
    // 箭头函数作为回调，点击时才执行selectTime，自动传入事件对象e
    addEventListener("click", (e) => selectTime(e, x));
});

function selectTime(e, item) {
    e.preventDefault();
    // 这里可以正常使用item，比如打印选中的时间
    console.log("选中时长：", item.innerHTML);
}

方法二：使用bind绑定参数

通过bind提前绑定item参数，事件触发时浏览器会自动传入事件对象作为第一个参数：

let testTime = document.querySelectorAll(".testTime");
testTime.forEach((x) => {
    console.log(x.innerHTML);
    // bind占位第一个参数（留给事件对象），绑定x作为第二个参数
    addEventListener("click", selectTime.bind(null, undefined, x));
});

function selectTime(e, item) {
    e.preventDefault();
    console.log("选中时长：", item.innerHTML);
}