Skip to main content
Commonmark migration
Fonte Link

Leitura recomendada: W3Schools: onclick Event (em inglês)

 

Leitura recomendada: W3Schools: HTML DOM click() Method (em inglês)

 

Leitura recomendada: jQuery .click() Documentation (em inglês)

Leitura recomendada: W3Schools: onclick Event (em inglês)

 

Leitura recomendada: W3Schools: HTML DOM click() Method (em inglês)

 

Leitura recomendada: jQuery .click() Documentation (em inglês)

Leitura recomendada: W3Schools: onclick Event (em inglês)

Leitura recomendada: W3Schools: HTML DOM click() Method (em inglês)

Leitura recomendada: jQuery .click() Documentation (em inglês)

resposta reformulada
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36

"- 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.

  • JavaScript puro:

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>


  • JavaScript com jQuery:

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)

O click() é um método do JavaScript para qualquer HTMLElementObject (elementos HTML), não exclusivamente à jQuery. Seu primeiro parâmetro espera um handler (semelhante a uma callback).

A forma que você exemplificou é "como se fosse uma forma curta" de definir o handler, e está sendo aplicada em um elemento jQuery ($("p")):

$( "p" ).click(function() {
  $( this ).slideUp();
});

Mas também pode ser assim:

function foo() {
    alert('Executou foo()');
}
$( "p" ).click(foo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>parágrafo</p>

O que acaba já respondendo o seguinte:

"- porque não usar o .click() e executar uma função por si só, sem o uso de function()"

Tudo convém ao seu projeto. Se vai utilizar a mesma "function(){}" como handler de vários eventos, ideal é você utilizar da segunda 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

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();
}

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!

"- porque não usar o .click() e executar uma função por si só, sem o uso de function()"

Resposta rápida

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!

Esta forma é incorreta:

$( "p" ).click() {
  $( this ).slideUp();
}

Sobre o método .click()

O click() é um método do JavaScript para qualquer HTMLElementObject (elementos HTML), MAS seu comportamento é diferente quando está atrelado a um objeto jQuery.

  • JavaScript puro:

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(){
        document.getElementById('checkbox').click(); // <<<<
    },
    false
);
<input type="checkbox" id="checkbox">
<button type="button" id="botao">Clique aqui</button>


  • JavaScript com jQuery:

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 myScript()!');
}
$('#btnClick').click(myScript);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btnClick">Clique!</button>
 

Da forma que você exemplificou é "como se fosse uma forma curta" de definir o handler:

$( "p" ).click(function() {
  $( this ).slideUp();
});

Você 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 primeira 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

Leitura recomendada: W3Schools: HTML DOM click() Method (em inglês)

Leitura recomendada: jQuery .click() Documentation (em inglês)

adicionou 1491 caracteres ao conteúdo
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36

O click() é um método do JavaScript para qualquer HTMLElementObject (elementos HTML), não exclusivamente à jQuery. E seuSeu primeiro parâmetro espera um handler (tiposemelhante a uma callbackcallback).

A forma que você exemplificou é "como se fosse uma forma curta" de definir o handler, e está sendo aplicada em um elemento jQuery ($("p")):

Perceba, também, que desta forma não pode ser definido argumentos na chamada da função! Se houver, deve, novamente, voltar ao bloco function(){ foo(arg1, arg2); }.


Como estamos falando especificamente do evento click, por que não comentar as várias forma válidas?!

  • Direto no elemento:

      <element onclick="myScript">
    
  • Em JavaScript puro:

      object.onclick = function(){myScript};
    
  • Em JavaScript puro - usando o método addEventListener (não funciona em Internet Explorer <= 8):

      object.addEventListener("click", myScript);
    
  • Em JavaScript com jQuery - usando o método on:

      $('#id').on('click', myScript);
    

Obs.: nos 3 exemplos acima, myScript é a chamada da função...

Leitura recomendada: W3Schools: onclick Event (em inglês)

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>

O click() é um método do JavaScript. E seu primeiro parâmetro espera um handler (tipo uma callback).

A forma que você exemplificou é "como se fosse uma forma curta" de definir o handler:

Perceba, também, que desta forma não pode ser definido argumentos na chamada da função! Se houver, deve, novamente, voltar ao bloco function(){ foo(arg1, arg2); }.

O click() é um método do JavaScript para qualquer HTMLElementObject (elementos HTML), não exclusivamente à jQuery. Seu primeiro parâmetro espera um handler (semelhante a uma callback).

A forma que você exemplificou é "como se fosse uma forma curta" de definir o handler, e está sendo aplicada em um elemento jQuery ($("p")):

Perceba, também, que desta forma não pode ser definido argumentos na chamada da função! Se houver, deve, novamente, voltar ao bloco function(){ foo(arg1, arg2); }.


Como estamos falando especificamente do evento click, por que não comentar as várias forma válidas?!

  • Direto no elemento:

      <element onclick="myScript">
    
  • Em JavaScript puro:

      object.onclick = function(){myScript};
    
  • Em JavaScript puro - usando o método addEventListener (não funciona em Internet Explorer <= 8):

      object.addEventListener("click", myScript);
    
  • Em JavaScript com jQuery - usando o método on:

      $('#id').on('click', myScript);
    

Obs.: nos 3 exemplos acima, myScript é a chamada da função...

Leitura recomendada: W3Schools: onclick Event (em inglês)

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>

removeu 4 caracteres do conteúdo
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36
Carregando
Fonte Link
LipESprY
  • 4,6mil
  • 2
  • 21
  • 36
Carregando