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 =&nbsp;&nbsp; &nbsp; function() {&nbsp; &nbsp; &nbsp; &nbsp; myclassObj.closeThis();&nbsp; &nbsp; };

Answer 2

它应该是 document.getElementById("closeButton").onclick = myclassObj.closeThis; 不 myclassObj.closeThis();myclassObj.closeThis() 将调用该函数，然后将值分配给onclick

Answer 3

您需要从中删除括号()，否则它将立即被调用，因为这是通过后缀调用函数的方式()，因此只需删除以下括号即可：document.getElementById("closeButton").onclick = myclassObj.closeThis;