如何在addEventListener的点击事件监听器中向内部函数传递参数？

你的代码里addEventListener("click", changeColor(btn1))会立即执行changeColor函数，而不是把它作为点击事件的回调。下面是几种给回调传参的实用方法：

方法1：匿名函数包裹 #

用匿名函数作为事件处理函数，点击时再调用目标函数并传入参数：

function changeColor(btn){
    btn.style.backgroundColor = "red";
}
let btn1 = document.getElementById("1");
btn1.addEventListener("click", function() {
    changeColor(btn1);
});

方法2：使用bind绑定参数 #

bind会创建一个新函数，点击时自动把指定参数传入目标函数：

function changeColor(btn){
    btn.style.backgroundColor = "red";
}
let btn1 = document.getElementById("1");
btn1.addEventListener("click", changeColor.bind(null, btn1));

方法3：利用事件对象（最适合多按钮场景） #

如果要处理多个按钮，直接通过事件对象的target属性获取当前点击的元素，不用提前传参，一个函数就能搞定所有按钮：

function changeColor(event) {
    const btn = event.target;
    btn.style.backgroundColor = "red";
}

// 给所有类为btn-class的按钮绑定事件
document.querySelectorAll(".btn-class").forEach(btn => {
    btn.addEventListener("click", changeColor);
});

内容的提问来源于stack exchange，提问作者sidharth sid