javascript - Onclick 事件被自动调用

Question

我写了一个 JavaScript 类MyClass，我在其中定义了一个方法closeThis

MyClass = function() {
  this.closeThis = function() {
    document.getElementById("hidePane").style.display = 'none';
  }
}

现在，在我的 html 中，我试图将其称为如下......

<script type="text/javascript">
  function callThis() {
    var myclassObj = new MyClass();
    document.getElementById("closeButton").onclick = myclassObj.closeThis();
  }
</script>

callThis当我单击一个按钮时，将调用上述内容。这里的问题是，页面加载时会自动调用onclick顶部的事件。clsoeButtion这有什么问题？

Answer 1

您正在立即调用该函数。

当您在函数引用上留下括号时，您基本上是在说：

评估 closeThis 函数并将结果分配给 onclick

当您真正想要做的是将函数引用分配给单击处理程序时：

document.getElementById("closeButton").onclick = myclassObj.closeThis;

省略括号，您会将 closeThis 函数绑定到 onclick。这反而说的是：

将函数 closeThis 分配给单击处理程序。

您实际上是将函数作为一等对象或对函数的引用分配给变量。

顺便说一句，我个人的偏好是始终使用匿名函数包装器。有时您需要能够将参数传递给您的函数，这确保您可以更轻松地做到这一点：

document.getElementById("closeButton").onclick = 
    function() {
        myclassObj.closeThis();
    };

Answer 2

应该 document.getElementById("closeButton").onclick = myclassObj.closeThis; 不是 myclassObj.closeThis();

myclassObj.closeThis()将调用该函数，然后将值分配给 onclick

Answer 3

您需要从中删除()，否则它会立即被调用，因为这就是您通过后缀调用函数的方式()，因此只需删除这些大括号：

document.getElementById("closeButton").onclick = myclassObj.closeThis;