Função OnClick em JQuery explicada com exemplos

Uma das bibliotecas rápidas, pequenas e ricas em recursos em JavaScript é jQuery. jQuery é usado para fazer documentos HTML, manipulação de eventos, travessia e manipulação, etc.

Sempre que um elemento HTML é clicado, ocorre o evento click do jQuery. Para acionar a função onclick no jQuery , o método click() é usado. Por exemplo, ao clicar em um parágrafo em um documento, um evento de clique será acionado pelo método $(“p”).click(). O usuário pode anexar uma função a um método de clique sempre que ocorrer um evento de clique para executar a função. Um pedaço de código é executado sempre que um evento de click() é acionado.

O clique do mouse é simulado através do método HTMLElement.click().

A função Click() é uma função embutida no jQuery que inicia um evento de clique. Sempre que um elemento relevante é clicado, um evento é disparado por um método click(). Este evento então dispara um evento de clique de elementos mais acima na árvore do documento (ou cadeia de eventos).

Como o nome sugere, é simplesmente pressionar e soltar o botão do mouse pelo usuário sobre o elemento.

Um ou mais manipuladores de eventos são anexados aos elementos selecionados por meio do método on(). Ao clicar em um elemento, ocorre um evento de click(). Um método click() é executado quando ocorre um evento de click(). Uma função é anexada a um método click() e executada. Um método click() é usado com outros eventos do jQuery.

Portanto, .click() vincula um manipulador de eventos ao evento JavaScript “click”, ou aciona um evento em um elemento. As variações do método onclick JavaScript são:

1. .click( manipulador ).
2. .click( [eventData ], manipulador ).
3. .clique().

A primeira e a segunda variações são uma forma curta para .on( “click”, handler ) e o atalho para .trigger( “click” ) na última variação.

Sempre que o ponteiro do mouse estiver sobre o elemento e o botão for pressionado e liberado, o evento click() é então enviado para aquele elemento. O evento pode ser recebido por qualquer elemento do HTML.

O evento Click() também pode ser acionado se o outro elemento for clicado por meio do código a seguir.

Com este código, a mensagem será alertada pelo elemento

Através dos eventos a seguir, apenas um evento click() é acionado.

• Quando o ponteiro de um mouse está dentro de um elemento e o botão do mouse está pressionado.
• Quando o ponteiro de um mouse está dentro de um elemento e o botão do mouse é liberado.

Antes de tomar uma ação, os eventos acima mencionados geralmente são a sequência desejada. Caso contrário, o outro evento adequado é o evento mouse para baixo ou mouse para cima.

Devido ao método .click() ser o atalho para .on( “click”, handler ), a possibilidade de desanexação está presente através do uso de .off( “click” ).

Uso

Duas maneiras estão presentes que podem ser usadas para chamar um método click():

• Com um determinado argumento de função
• Sem um determinado argumento

A função onclick em jQuery pode ser usada em elementos de HTML como div, parágrafos, hiperlinks, etc. para realizar a tarefa desejada. Um clique é um evento do mouse que ocorre ao pressionar o botão do mouse. No entanto, o evento ocorrerá se o ponteiro do mouse estiver dentro do elemento.

Sintaxe:

$(seletor).click() ; -> usado para acionar um evento de clique para os elementos selecionados.

$(seletor).click(função); -> usado para anexar função a um evento de clique.

• O parâmetro opcional utilizado é a “função” que é utilizada para execução na ocorrência de um evento de clique.
• Valor de retorno: O elemento selecionado é retornado especificado com a função a ser executada.

Implementação do método click()

1. Quando um argumento de função é fornecido

Nesse tipo de implementação, uma função é tomada como entrada e é executada sempre que o método click() é chamado.

• A escrita do código está entre a tag de script e dentro do corpo HTML do código.
• A chamada da função é feita como um atributo de estilo h1.
• Um argumento é declarado com a função e é considerado uma função separadamente.
• O método toggle é aplicado sobre o objeto usando este operador com 1000ms de atraso.
• Um exemplo do método de implementação com um determinado argumento de função é mostrado abaixo.

A saída do código será "Clicar em mim alternará o texto!"

2. Quando nenhum argumento é dado

O método onclick do javascript dispara um evento de Um elemento já está atribuído ao método. Portanto, um elemento pode chamar o evento onclick de outro elemento separadamente. Isso pode ser alcançado através dos seguintes passos:

1. Um objeto deve ser declarado primeiro com um atributo de um estilo específico que seja clicável. Uma ação onclick deve ser declarada para o objeto.
2. Um bloco de script deve ser criado no corpo do código onde a atribuição do método click() é feita para um formato de estilo diferente, p .
3. O método h1 onclick que já está definido deve ser chamado dentro da chamada da função.
4. O mesmo método onclick é então chamado para um atributo.
5. Um exemplo de código mostrando a implementação de um método click() sem um determinado argumento é mostrado abaixo.

A saída do código é “Clicar em mim chamará um alerta!”.

• • Muitos eventos podem ser usados ​​no método $.on como dblclick, change e outros.

3. Renderizando um botão HTML e adicionando texto à página ao clicar no botão. O método Click() é mais comumente anexado a um botão, no entanto, ele pode ser anexado a qualquer outro elemento em uma página da web.

• • Um botão básico é renderizado com um id de “btn-primary” que está dentro de um <div> com um id de “main.
  • Através do código, o novo conteúdo deve ser exibido com uma classe de “novo conteúdo” na tag <p> após o clique do botão.
  • O jQuery é colocado dentro das tags <script>.

• • O método click() é anexado ao id do botão e um argumento é tomado como uma função de retorno de chamada que é uma função anônima.
  • A string “Button clicked” é retornada pela função callback.

• • Uma função sem nome é simplesmente denominada como uma função anônima e usada como retornos de chamada como argumentos de um método. Para construir sites e aplicativos responsivos, as funções anônimas e os métodos de retorno de chamada atuam como a base.

• • O código começará com o botão dentro do <div> “main”.
  • Quando o botão for clicado, a função de retorno de chamada será chamada pelo manipulador de eventos, pois o método click() está anexado ao seletor de botão.
  • A string “Botão clicado” será exibida.
  • O código acima renderizará o conteúdo apenas uma vez, no entanto, para exibir a string toda vez que o código for clicado, append() é usado em vez de HTML().

• • Ele produzirá a string três vezes como o novo conteúdo dentro da tag <p>.
  • A função de retorno de chamada é chamada cada vez que o botão é clicado.

Conclusão

O funcionamento da função onclick no jquery foi discutido no artigo junto com seus usos e exemplos. Com apenas algumas linhas de código, a funcionalidade da página da Web pode ser criada por meio do método onclick do JavaScript .

Se você tem vontade de aprender mais sobre desenvolvimento web e se especializar em outras áreas afins, então você pode conferir o curso “ Master of Science in Computer Science ” oferecido pelo upGrad . Especialmente desenvolvido para profissionais iniciantes (tanto do sexo masculino quanto do feminino de 21 a 45 anos), o curso será em uma plataforma online com sessões ao vivo, para facilitar os deslocamentos de longa distância. Com mais de 30 projetos e atribuições, o aluno receberá os benefícios do status de ex-alunos do IIIT-Bangalore e LJMU . Sinta-se à vontade para entrar em contato com nossa equipe para qualquer assistência.