"- porque não usar o .click() e executar uma função por si só, sem o uso de function()"
Resposta rápida
O click()
é um método do JavaScript para qualquer HTMLElementObject
(elementos HTML), não exclusivamente à jQueryVocê está querendo "definir o método" já na sua própria execução. Seu primeiro parâmetro espera um handler (semelhante a umaIsso está errado! Não foi feito assim callback).e devemos nos conformar!
A forma que você exemplificou é "como se fosse umaEsta forma curta" de definir o handler, e está sendo aplicada em um elemento jQuery ($("p")
)é incorreta:
$( "p" ).click(function() {
$( this ).slideUp();
});
Sobre o método .click()
Mas também pode ser assimO click()
é um método do JavaScript para qualquer HTMLElementObject
(elementos HTML), MAS seu comportamento é diferente quando está atrelado a um objeto jQuery.
O método .click()
simula um clique no objeto - como se o usuário estivesse apontando o mouse e clicando. Veja:
document.getElementById('botao').addEventListener(
'click',
function(){
foo document.getElementById('checkbox').click(); // <<<<
},
false
);
<input type="checkbox" id="checkbox">
<button type="button" id="botao">Clique aqui</button>
O método .click()
, quando em um objeto jQuery, captura o evento click
e executa um handler (semelhante a uma callback) que deve ser passado como argumento. Veja:
function myScript(){
alert('Executou foomyScript()!');
}
$( "p" '#btnClick').click(foomyScript);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>parágrafo<
<button type="button" id="btnClick">Clique!</p>button>
ODa forma que acaba já respondendovocê exemplificou é "como se fosse uma forma curta" de definir o seguintehandler:
"- porque não usar o .click() e executar uma função por si só, sem o uso de function()"
$( "p" ).click(function() {
$( this ).slideUp();
});
TudoVocê pode utilizar de ambas as formas. Isso convém ao seu projeto. Se vai utilizar a mesma "function(){}
" como handler de vários eventos, ideal é você utilizar da segundaprimeira forma - definindo uma função e posteriormente invocando-a dentro do método .click()
. Mas, se você vai utilizar esse bloco de código uma única vez, porque não colocá-lo diretamente dentro do método!? ;D
Variações
Bônus:
Além disso tudo, ainda existe o método .click()
sem argumentos que simula um clique no elemento - como se o usuário estivesse apontando o mouse e clicando:
document.getElementById('botao').addEventListener(
'click',
function(){
document.getElementById('checkbox').click(); // <<<<
},
false
);
<input type="checkbox" id="checkbox">
<button type="button" id="botao">Clique aqui</button>
Já a seguinte forma é incorreta:
$( "p" ).click() {
$( this ).slideUp();
}
Leitura recomendada: W3Schools: HTML DOM click() Method (em inglês)
Você está querendo "definir o método" já na sua própria execução. Isso está errado! Não foi feito assim e devemos nos conformar!
Leitura recomendada: jQuery .click() Documentation (em inglês)