jQuery.click(): Ligar eventos de clique a elementos

Com a ajuda do método jQuery.click(), em vez de programar event handlers (ma­ni­pu­la­do­res de eventos) complexos, você poderá vincular funções a eventos de clique em elementos HTML, processo que é muito mais simples. Assim, além de facilitar o seu trabalho, o método jQuery.click() deixará o seu código-fonte mais compacto e legível.

O que é jQuery.click()?

Ao aplicar o método jQuery.click() a um de­ter­mi­nado elemento HTML, você deverá usar uma função como argumento, que será chamada quando o elemento for clicado pelo usuário. Nesse contexto, o jQuery.click() é capaz de executar di­fe­ren­tes ações, como:

• Alterar pro­pri­e­da­des de elementos por meio da função jQuery.addClass().
• Acionar outros eventos.
• Carregar conteúdos por AJAX com o jQuery.ajax().

O jQuery.click() também pode ser combinado com funções de loop, como com jQuery.each().

Sintaxe do método jQuery.click()

O método jQuery.click() apresenta a seguinte sintaxe básica:

$(selector).click(function);

No jQuery.click(), function é um parâmetro opcional, a ser executado quando ocorre um evento de clique em um elemento se­le­ci­o­nado.

Se você quer conhecer ou se apro­fun­dar nos prin­cí­pios básicos do jQuery, acesse o nosso tutorial de jQuery para prin­ci­pi­an­tes. Lá, você encontra todas as in­for­ma­ções ne­ces­sá­rias sobre sintaxes e seletores.

Qual é a diferença entre jQuery.click() e jQuery.onClick?

A principal diferença entre jQuery.click() e jQuery.onClick é a seguinte: jQuery.click() é um método da bi­bli­o­teca jQuery, enquanto jQuery.onClick é um ma­ni­pu­la­dor de eventos nativo do Ja­vaS­cript. O .onClick é aplicado di­re­ta­mente a um elemento do DOM, além de requerer a indicação de uma função a ser chamada quando ocorre um evento de clique. Sua sintaxe tem o formato element.onClick = handler, em que element é o elemento do DOM e handler é a função executada quando o evento ocorre.

Outra diferença é que a função jQuery.click() possui algumas vantagens em com­pa­ra­ção ao ma­ni­pu­la­dor .onClick nativo, incluindo a sim­pli­fi­ca­ção da escrita do código, uma melhor com­pa­ti­bi­li­dade com os na­ve­ga­do­res e a ca­pa­ci­dade de reagir a elementos adi­ci­o­na­dos di­na­mi­ca­mente.

Exemplo de uso de jQuery.click()

Neste código, o evento de clique, jQuery.click() button abre uma janela pop-up contendo o texto The button was clicked assim que o usuário clica no elemento:

$("button").click(function(){
    alert("The button was clicked.");
});