JS - EventListener點擊無法正常工作

-1

當頁面加載時，應該顯示幾個不同顏色的小方塊（並且它會），當我點擊所需的方塊時，它會將整個頁面背景顏色更改爲它。但點擊不起作用。出於某種原因，頁面加載時點擊一次，所以如果我將setbgcolor（）中的最後一行註釋掉，頁面將變爲藍色，否則它將保持白色，就像在presant代碼中一樣。在頁面加載後單擊不執行任何操作。JS - EventListener點擊無法正常工作

var colorArr = ["Red", "Orange", "Yellow", "Green", "Teal", "Blue", "Purple", "Grey"]; 

for(var i=0; i<colorArr.length; i++){ 

    var div = document.createElement('div'); 
    div.style.backgroundColor = colorArr[i]; 
    div.setAttribute('class', 'palette'); 
    div.addEventListener("click", setBgColor(div)); 

    document.getElementById('palette-div').appendChild(div); 

} 

function setBgColor(clickedDiv) { 
     var bgColor = clickedDiv.style.backgroundColor; 

    document.body.style.backgroundColor = "blue"; 
    document.body.style.backgroundColor = bgColor; 
}

來源

2015-09-29 Kek Eke

您正在調用setBgColor而不是傳遞它。

div.addEventListener("click", setBgColor(div));

傳給你需要離開括號出來的方法：

div.addEventListener("click", setBgColor);

然後，您可以找出被點擊其格，通過調查setBgColor的this上下文。

來源

2015-09-29 11:39:21 Rodik

賦值狀態，我需要調用setBgColor，我應該通過'this'作爲參數，以便該函數知道哪個div被調用。不過，我明白你的意思，就像在Java中，我應該儘管這一點。那麼basiclly的任務是錯誤的呢？ –

您不應該以這種方式傳遞迴調函數。有兩種方法可以正確地做到這一點：

方法1：

div.addEventListener("click", setBgColor);

注意，使用這種方法，你不能定義自定義參數的調用的函數。但是，在這種情況下，你並不需要它。

setBgColor將被調用1個參數 - MouseEvent對象具有一些屬性，如target。

你可以讓你setBgColor功能如下所示：

function setBgColor(ev) 
{ 
    ev.target.style.backgroundColor = '#FF0000'; 
}

這種方式是最好因爲你在一個循環中添加事件偵聽器的多個對象。正如@Rodik在評論中提到的那樣，在循環中使用匿名函數絕對是一種不好的做法。

方式2：

如果你只需要指定一個函數調用，您可以實現這將作出理想的函數調用的匿名函數：

div.addEventListener("click", function() 
{ 
    setBgColor(div); 
});

來源

2015-09-29 11:41:04

雖然這會起作用，但在循環內定義匿名函數是一種不好的模式。 – Rodik

@Rodik你能解釋一下爲什麼嗎？ – Zim84

@Rodik我同意。我沒有注意到一個循環。當然，在這種情況下，方式1更好。我已經更新了答案。 –

ele.addEventListener("event", function(){//handler});//this syntax of addevent 
// but your code 

div.addEventListener("click", setBgColor()); 
// setBgColor ==>this function reference 
// setBgColor() ==> this function calling (in case of you its returning undefined) 

div.addEventListener("click", setBgColor);//modify like this

檢查這

var colorArr = ["Red", "Orange", "Yellow", "Green", "Teal", "Blue", "Purple", "Grey"]; 
 

 
for(var i=0; i<colorArr.length; i++){ 
 

 
    var div = document.createElement('div'); 
 
    div.style.backgroundColor = colorArr[i]; 
 
    div.setAttribute('class', 'palette'); 
 
    div.addEventListener("click", setBgColor); 
 

 
    document.getElementById('palette-div').appendChild(div); 
 

 
} 
 

 
function setBgColor(event) { 
 
     var bgColor = event.target.style.backgroundColor; 
 

 
    document.body.style.backgroundColor = "blue"; 
 
    document.body.style.backgroundColor = bgColor; 
 
}

.palette{ 
 
width:50px; 
 
    height:50px; 
 
    display:inline-block; 
 
}

<div id="palette-div"></div>

來源

2015-09-29 11:46:08 yugi

JS - EventListener點擊無法正常工作

回答

相關問題