将Eventlistener传递给JS中的正确函数

Question

我有两个带有两个EventListeners的按钮(每个按钮的值与食物菜单中菜肴的id相匹配)。一个按钮用于向购物车中添加东西，一个按钮用于从购物车中删除东西。我的问题是，我无法弄清楚如何将Eventlistener传递给正确的类函数。这是我到目前为止的代码:

class Cart {

constructor() {
this.inhalt = [];
}
add(item) {
this.inhalt.push(item);
console.log(this.inhalt)
}
remove(item) {
for (let i = 0; i < this.inhalt.length; i++) {
if (this.inhalt[i].id === item.id) {
this.inhalt.splice(i, 1);
console.log(this.inhalt)
}
}
}
sum() {
let s = null;
this.inhalt.price.forEach(element => {
s += element
});
console.log(s)
}
}
const myCart = new Cart();
function getItem(type) {
let item = null;
for (let i=0; i<speisekarte.length; i++) {
if (speisekarte[i].id === this.value) {
item = speisekarte[i];
break;
}
}
if (type == "plus") {myCart.add(item)}
else if (type == "minus") {myCart.remove(item)};
}
let plus = document.querySelectorAll(".kaufen");   
plus.forEach(el =>{                             
let type = "plus"; el.addEventListener("click", getItem(type));
});
let minus = document.querySelectorAll(".zurück");
minus.forEach(el =>{
let type = "minus"; el.addEventListener("click", getItem(type));
});

Answer 1

在注册事件监听器时不应该调用这些函数。

代替:

let plus = document.querySelectorAll(".kaufen");   
plus.forEach(el =>{                             
let type = "plus"; el.addEventListener("click", getItem(type));
});
let minus = document.querySelectorAll(".zurück");
minus.forEach(el =>{
let type = "minus"; el.addEventListener("click", getItem(type));
});

这样做:

let plus = document.querySelectorAll(".kaufen");   
plus.forEach(el =>{                             
el.addEventListener("click", () => getItem("plus"));
});
let minus = document.querySelectorAll(".zurück");
minus.forEach(el =>{
el.addEventListener("click", () => getItem("minus"));
});