Question

我写了一个名为“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”事件会在页面加载时自动调用。这可能有什么问题？

Answer 1

你正在调用这个功能。

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

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

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

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;

JavaScript - 自动调用onclick事件

3 个答案: