JS - EventListener щелчок не работает должным образом

Question

Когда страница загружается, она должна показывать несколько небольших квадратов разных цветов (и это действительно так), и когда я нажимаю нужный квадрат, он меняет цвет фона всей страницы. Но щелчок не работает. По какой-то причине клик проходит один раз, когда загружается страница, поэтому, если я прокомментирую последнюю строку в файле setbgcolor(), страница станет синей, в противном случае она останется белой, как в коде присутствующего. Щелчок после загрузки страницы ничего не делает.

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; 
} 

Answer 1

Вы вызываете setBgColor вместо его передачи.

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

Чтобы передать метод, который нужен оставить скобку из:

div.addEventListener("click", setBgColor); 

Вы можете выяснить, какие ДИВ было нажато, исследуя this контекст в setBgColor.

Answer 2

Вы не должны передавать функцию обратного вызова таким образом. Есть два способа сделать это правильно:

Путь 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); 
}); 

Answer 3

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>