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点击无法正常工作

回答

相关问题