addEventListener函数是在声明listener时执行的

addEventListener function is being executed when listener is declared

本文关键字：执行 listener 声明 函数 addEventListener      更新时间：2023-09-26

我有这个javascript代码

function change (elem){
  if (x==1) elem.innerHTML = "1";
  else elem.innerHTML = "not 1";
}
var test = document.getElementById ("abc");
var x=1;
test.addEventListener ("click", change(test));

html看起来像这个

<body>
  <div id="abc">a div</div>
</body>

如何防止函数在单击div元素之前执行？现在它只是自己更改innerHTML，我希望它等待点击监听器。

它被立即执行，因为正在立即调用：

test.addEventListener ("click", change(test));

您需要传递一个函数，而不是函数调用的结果：

test.addEventListener("click",
  function() {
    change(test);
  }
);

您应该以以下方式调用函数，例如：

test.addEventListener ("click", function(){change(test)});

下面是一个示例fiddle

test.addEventListener("click", function(){ change(this);});

由于括号的原因，您将立即执行函数change（）。

另一种方法是通过引用传递函数，并使用this获取元素。

function change (){
  if (x==1) this.innerHTML = "1";
  else this.innerHTML = "not 1";
}
var test = document.getElementById ("abc");
var x=1;
test.addEventListener ("click", change);
相关文章：