假設我有一組按鈕，每個按鈕為單擊的元素分配不同的顏色。所以，紅色按鈕使被點擊的元素變成紅色。
我不想為每個事件撰寫一個事件處理程式，而是想撰寫一個動態命名的事件處理程式。
到目前為止，我已經嘗試創建一個顏色名稱陣列：
const colors = ['red', 'orange', 'yellow', ...]
然后回圈遍歷該陣列：
for (i = 0; i < colors.length; i ) {
// for each color in array, assign it to a button
colors[i].addEventListener("click", function () {
...
});
}
希望我最終會得到red.addEventListener...，orange.addEventListener...等等。但是，結果是：TypeError: colors[i].addEventListener is not a function。
我試過使用模板文字但沒有成功。這看起來很有希望，但沒有奏效（可能是因為我不確定我完全理解那里發生了什么）。
提前致謝，如果我能澄清，請告訴我。
uj5u.com熱心網友回復：
這表明您需要將 HTML 與 JS 集成。
<!-- HTML -->
<button class="color-button" id="pink">Pink</button>
<button class="color-button" id="yellow">Yellow</button>
<button class="color-button" id="cyan">Cyan</button>
<!-- JS -->
// add EventListener to each .color-button
[].slice(document.getElementsByClassName("color-button")).forEach(button => {
button.addEventListener("click", buttonHandler, !1)
});
// use the id-attribute of each button to
// set the button's background colour
const = buttonHandler = (e) => {
let target = e.target,
color = target.id;
target.style.bacgroundColor = color;
};
uj5u.com熱心網友回復：
您可以以編程方式創建按鈕和/或添加事件偵聽器，如下所示：
const buttonContainer = document.getElementById('button-container');
const target = document.getElementById('target');
const colors = [ "red", "blue", "yellow" ];
for (const color of colors) {
const colorButton = document.createElement('button');
colorButton.innerText = color;
colorButton.addEventListener('click', () => {
target.style.backgroundColor = color;
});
buttonContainer.appendChild(colorButton);
}#target {
width: 200px;
height: 200px;
background-color: red;
}<div id="button-container"></div>
<div id="target"></div>您還可以將事件偵聽器添加到現有的按鈕串列中，只要按鈕識別符號遵循設定的格式：
const target = document.getElementById('target');
const colors = [ "red", "blue", "yellow" ];
for (const color of colors) {
const button = document.getElementById(`button-${color}`);
button.addEventListener('click', () => {
target.style.backgroundColor = color;
});
}#target {
width: 200px;
height: 200px;
background-color: red;
}<button id="button-red">red</button>
<button id="button-blue">blue</button>
<button id="button-yellow">yellow</button>
<div id="target"></div>uj5u.com熱心網友回復：
您可以使用addEventListenerhtml 元素，而不是字串。
您需要將字串轉換為 html 元素以向其添加事件偵聽器。
您可以使用您的節點創建一個物件，并為其分配點擊事件監聽器。
const colors = ['red', 'orange', 'yellow'];
const red = document.getElementById("red");
const orange = document.getElementById("orange");
const yellow = document.getElementById("yellow");
const nodeObj = {
red,
orange,
yellow
}
for (i = 0; i < colors.length; i ) {
// for each color in array, assign it to a button
nodeObj[colors[i]].addEventListener("click", function (e) {
console.log(`You clicked ${e.currentTarget.id}`)
});
}<p id="red">Red</p>
<p id="orange">Orange</p>
<p id="yellow">Yellow</p>或者
你可以利用eval它（這是一個骯臟的修復）。
const colors = ['red', 'orange', 'yellow'];
const red = document.getElementById("red");
const orange = document.getElementById("orange");
const yellow = document.getElementById("yellow");
for (i = 0; i < colors.length; i ) {
// for each color in array, assign it to a button
eval(colors[i]).addEventListener("click", function (e) {
console.log(`You clicked ${e.currentTarget.id}`)
});
}<p id="red">Red</p>
<p id="orange">Orange</p>
<p id="yellow">Yellow</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402020.html
標籤：javascript 事件监听器
下一篇：物件陣列中每天的鍵總和