Javascript EventListener 由它自己调用

Question

我有一段代码，每当用户单击文本时，它都应该更改文本颜色。但是在用户单击文本之前，文本颜色会更改。似乎在用户执行之前调用了单击事件!!请告诉我我在这里做错了什么？

var div = document.getElementById("div1"); // there is html div inside of html file with id "div1"
div.innerHTML = "Hello world";
function colorChange(id){
    document.getElementById(id).style.color="red";
};
div.addEventListener("click",colorChange("div1"));

Answer 1

实际上，在创建事件处理程序后立即调用函数。请注意你的代码div.addEventListener('click', colorChange('div1')) <- 这是你在那里()偏执（调用函数）的事实。

您需要传入一个匿名函数。

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