我如何將參數傳遞給點擊事件列表內的 function

Question

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

我知道在“ addEventListner ”中調用 function 會立即調用 function。 但我確實需要在“ addEventListner() ”中將 object 傳遞給我的 function，因為我打算只使用一個通用的 function 按鈕來處理點擊。

Answer 1

您必須創建一個匿名 function () => changeColor(btn)

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

Answer 2

從上面的評論...

“處理程序 function 被傳遞給它一個事件類型。一個 UI 事件總是具有一個currentTarget和一個target屬性。OP 應該訪問前者...... event.currentTarget.style.backgroundColor = "red"; 。"

除了使用顏色變化 function 作為回調之外，還可以實現一個特定於按鈕的單擊處理程序，該處理程序將其當前目標轉發到通用 function ，該處理程序會更改任何傳遞的元素引用的背景顏色。

 function changeElementColor(elm){ elm.style.backgroundColor = 'red'; } function handleButtonClick(evt) { changeElementColor(evt.currentTarget); } document.querySelectorAll('button').forEach(btnElm => btnElm.addEventListener('click', handleButtonClick) );

 <button><em>Hallo</em></button> <button><b>World</b></button>