英文:
Why is this integer argument giving me a pointerEvent object in JS?
问题
以下是要翻译的内容：
我将一个整数传递给这个事件监听器的回调函数，但出现了一些奇怪的参数问题。
函数定义：
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);
这与对象或数组无关，我认为问题可能特定于事件监听器或回调。
没有错误消息，只是参数的行为不如我所期望的那样。为什么会这样，如何获得我期望的行为？
英文:
im passing an integer to this callback for an EventListener and it messes up the argument for some reason
Function Definition:
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();
Function call:
for (let i = 0; i < tasks.length; i++)
document.getElementById(`deleteTask${tasks[i].Id}`).addEventListener("click", deleteTask, tasks[i].Id);
it has got nothing to do with the objects or array or anything like that, I think the problem may be specific to event listeners or callbacks.
There is no error message, it's just that the argument isn't passing as i expect it to.
Why is it behaving like this, and how can I get the behaviour I expect?
答案1
得分: 0
你正在错误地操作。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); });
我用一个箭头函数替换了回调，这个箭头函数同时捕获了回调和你想要传递给它的内容，并将回调与你想要传递的内容一起调用。
英文:
You're doing it wrong. addEventListener has three signatures- none of which are what you think exists:
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)
See the MDN docs for what options and useCapture are.
The listener function is called when the event it listens to is triggered, and it will be passed the even object carrying the details of that event. For the click event, that's an instance of a PointerEvent.
Things are working exactly as they are supposed to work- but not how you thought they'd work because you understood wrong. I'm not saying this to put you down. It's just a fact.
If you want tasks[i].Id to be available to the callback, you can do this:
document.getElementById(`deleteTask${tasks[i].Id}`)
.addEventListener("click", (ev) => { deleteTask(tasks[i].Id); });
I replaced the callback with an arrow function that captures both the callback and what you want to pass to it, and calls the callback with what you want to pass to it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论