JavaScript - 自动调用onclick事件

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赋值