Onclick 事件被自动调用答案

【问题标题】：Onclick event getting called automaticallyOnclick 事件被自动调用
【发布时间】：2012-04-11 07:48:09
【问题描述】：

我编写了一个名为 MyClass 的 JavaScript 类，我在其中定义了一个方法 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 将被调用。这里的问题是，当页面加载时，clsoeButtion 之上的 onclick 事件会被自动调用。这有什么问题？

【问题讨论】：

去掉 ...onclick = myclassObj.closeThis() 之后的括号。

标签： javascript onclick

【解决方案1】：

您正在立即调用该函数。

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

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

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

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

省略括号，您会将 closeThis 函数绑定到 onclick。这句话的意思是：

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

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

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

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

【讨论】：

谢谢@jmort253 它就像魅力一样...您建议的第一种方法就像将结果分配给奇怪的 onclick 事件。第二种方法很酷。正如你所说，我现在仍然可以传递参数。非常感谢:-)

【解决方案2】：

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

myclassObj.closeThis() 将调用该函数然后为 onclick 赋值

【讨论】：

【解决方案3】：

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

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

【讨论】：