为什么这个整数参数在 JS 中给我一个 pointerEvent 对象？

Question

我将一个整数传递给 EventListener 的这个回调，并且由于某种原因它弄乱了参数

函数定义：

const deleteTask = function (i) {               
    let temp = [];
    alert (i);  // shows "[object PointerEvent]" for some reason
    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);

它与对象或数组或类似的东西无关，我认为问题可能特定于事件侦听器或回调。

没有错误消息，只是参数没有像我预期的那样传递。

为什么会这样，我怎样才能得到我期望的行为？

Answer 1

你做错了。

addEventListener

有三个签名——没有一个是你认为存在的：

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

请参阅MDN 文档了解

options

和

useCapture

是什么。

监听器函数在它监听的事件被触发时被调用，它会被传递给它携带事件细节的偶数对象。对于

click

事件，这是一个

PointerEvent

.

的实例

事情完全按照它们应该的方式工作——但不是你认为它们会工作的方式，因为你理解错了。我不是说这让你失望。这只是一个事实。

如果你想让

tasks[i].Id

可用于回调，并且你不关心获取有关事件对象的详细信息，你可以这样做：

document.getElementById(`deleteTask${tasks[i].Id}`)
  .addEventListener("click", (ev) => { deleteTask(tasks[i].Id); });