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

Com a ajuda do método jQuery.click(), em vez de programar event handlers (manipuladores 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 determinado 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 diferentes ações, como:

• Alterar propriedades 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 selecionado.

Se você quer conhecer ou se aprofundar nos princípios básicos do jQuery, acesse o nosso tutorial de jQuery para principiantes. Lá, você encontra todas as informações necessá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 biblioteca jQuery, enquanto jQuery.onClick é um manipulador de eventos nativo do JavaScript. O .onClick é aplicado diretamente 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 comparação ao manipulador .onClick nativo, incluindo a simplificação da escrita do código, uma melhor compatibilidade com os navegadores e a capacidade de reagir a elementos adicionados dinamicamente.

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.");
});