Question

当页面加载时，它应该显示几个不同颜色的小方块（确实如此），当我点击所需的方块时，它会改变整个页面背景颜色。但点击不起作用。由于某些原因，当页面加载时点击会经过一次，所以如果我在setbgcolor（）中注释掉最后一行，页面就会变为蓝色，否则它会像presant代码一样保持白色。在页面加载后单击没有任何操作。

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

然后，您可以通过调查setBgColor中的this上下文来确定单击了哪个div。

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

检查这个

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JS - EventListener单击无法正常工作

3 个答案: