下面是我的程序的一个模块，用于切换页码。
我们如何使用`removeEventListener'来删除带有参数的函数？
我的JS部分是
document.querySelectorAll('button').forEach
( btn =>
{
btn.addEventListener("click" , function(){grab(btn.innerText)});
}
);
function grab(val)
{ document.getElementById("test1").innerText = Number(val);
document.getElementById("test2").innerText = Number(val)+1;
document.getElementById("test3").innerText = Number(val)+2;
}
//document.getElementById("testd").removeEventListener("click" , grab);
document.getElementById("testd").removeEventListener('click' ,function(){grab(btn.innerText)}); //trying to remove event on anonymous function
document.getElementById("testd").addEventListener("click", function(){Track()});
function Track()
{
console.log("Hello");
}
我必须提供参数，以便在单击按钮时可以增加值，但是我不希望在“<' & '>”按钮上使用此功能。我尝试使用
removeEventListener我知道我使用匿名函数来增加值，这就是为什么我在同一个匿名函数上使用
removeEventListener任何人都可以告诉我为什么它不起作用以及任何正确的方法吗？
谢谢你
无需移除事件监听器
我建议你改为委托
我添加了完整的逻辑并给数字一个类
window.addEventListener('DOMContentLoaded', () => { // when page loads
const maxPages = 10;
const visibleButtons = 3;
const back = document.getElementById('back');
const forward = document.getElementById('forward');
const nums = document.querySelectorAll('.num'); // all nums
const track = btn => {
const direction = btn.id === "forward" ? 1 : -1;
let val = +document.getElementById("test1").textContent;
for (let i = 1; i <= visibleButtons; i++) {
const btn = document.getElementById(`test${i}`)
btn.innerText = val + direction + (i - 1);
btn.disabled = +btn.innerText > maxPages;
}
val = +document.getElementById("test1").textContent;
back.disabled = val === 1;
forward.disabled = nums[visibleButtons-1].textContent >= maxPages;
// here you may want to navigate to some page based on value of first or last button
}
back.disabled = +document.getElementById('test1').textContent === 1;
document.getElementById('buttons').addEventListener('click', (e) => {
const tgt = e.target;
if (!tgt.matches('button')) return; // not a button
if (["back", "forward"].includes(tgt.id)) { // not the numbers
track(tgt);
return;
}
const val = tgt.textContent; // here we have the page the user clicked
// go to page val here
})
})<!DOCTYPE html>
<html>
<head>
<title>
API Fetching & displaying
</title>
<link rel="stylesheet" href="des.css">
</head>
<body id="main">
<div id="buttons">
<button id="back"><</button>
<button id="test1" class="num">1</button>
<button id="test2" class="num">2</button>
<button id="test3" class="num">3</button>
<button id="forward">></button>
</div>
</body>
</html>