Evento JavaScript – onclick sendo chamado automaticamente

Eu escrevi uma class javascript chamada “MyClass” na qual eu defini um método “closeThis”

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

Agora, no meu html, eu estou tentando chamar isso da seguinte forma …

  function callThis(){ var myclassObj = new MyClass(); document.getElementById("closeButton").onclick = myclassObj.closeThis(); }  

A chamada acima Isso será chamado quando eu clicou em um botão. O problema aqui é que o evento “onclick” em cima de “clsoeButtion” está sendo chamado automaticamente quando a página é carregada. O que poderia estar errado nisso?

Você está chamando a function imediatamente.

Quando você deixa os parênteses na referência da function, o que você está basicamente dizendo é:

Avalie a function closeThis e atribua o resultado ao onclick

quando o que você realmente quer fazer é atribuir a referência de function ao manipulador de cliques:

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

Deixe os parênteses fora, e você ligará a function closeThis ao onclick. O que isso diz é:

Atribua a function closeThis ao manipulador de cliques.

Você está essencialmente atribuindo a function à variável como um object de primeira class, ou uma referência a uma function.

Como um aparte, minha preferência pessoal é sempre usar um wrapper de function anônimo. Às vezes, você precisa passar parâmetros para sua function, e isso garante que você possa fazê-lo mais facilmente:

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

deve ser document.getElementById("closeButton").onclick = myclassObj.closeThis; não myclassObj.closeThis();

myclassObj.closeThis() irá chamar a function e então atribuir o valor para onclick

Você precisa remover () de outra forma ele é chamado imediatamente porque é assim que você chama uma function por sufixo () , então simplesmente remova estas chaves:

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