freeCodeCamp/guide/portuguese/jquery/jquery-click-method/index.md

3.1 KiB

title localeTitle
Click Method Clique em Método

Clique em Método

O método jQuery Click aciona uma função quando um elemento é clicado. A função é conhecida como "manipulador", pois manipula o evento click. Funções podem impactam o elemento HTML que está vinculado ao clique usando o método jQuery Click ou podem alterar algo totalmente. A forma mais utilizada é:

$("#clickMe").click(handler) 

O método click usa a função handler como argumento e a executa toda vez que o elemento #clickMe é clicado. A função de manipulador recebe um parâmetro conhecido como eventObject que pode ser útil para controlar a ação.

Exemplos

Este código mostra um alerta quando um usuário clica em um botão:


<button id="alert">Click Here</button> 
$("#alert").click(function () { 
  alert("Hi! I'm an alert"); 
 }); 

jsFiddle

O eventObject tem alguns métodos integrados, incluindo o preventDefault() , que faz exatamente o que ele diz - pára o evento padrão de um elemento. Aqui, impedimos que a tag âncora atue como um link:


<a id="myLink" href="www.google.com">Link to Google</a> 
$("#myLink").click(function (event) { 
  event.preventDefault(); 
 }); 

jsFiddle

Mais maneiras de jogar com o método de clique

A função de manipulador também pode aceitar dados adicionais na forma de um objeto:

jqueryElement.click(usefulInfo, handler) 

Os dados podem ser de qualquer tipo.

$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){ 
    alert(event.data.firstWord); 
    alert(event.data.secondWord); 
 }); 

Invocar o método de clique sem uma função de manipulador aciona um evento de clique:

$("#alert").click(function () { 
  alert("Hi! I'm an alert"); 
 }); 
 
 $("#alert").click(); 

Agora, sempre que a página for carregada, o evento de clique será acionado quando inserirmos ou recarregarmos a página e mostrarmos o alerta atribuído.

Além disso, você deve preferir usar .on ('click',…) sobre .click (…) porque o primeiro pode usar menos memória e trabalhar para elementos adicionados dinamicamente.

jsFiddle

Erros comuns

O evento click só é vinculado a elementos atualmente no DOM no momento da vinculação, portanto, todos os elementos adicionados posteriormente não serão vinculados. Para ligar todos elementos no DOM, mesmo se forem criados mais tarde, use o método .on() .

Por exemplo, este exemplo de método de clique:

$( "element" ).click(function() { 
  alert("I've been clicked!"); 
 }); 

Pode ser alterado para isso no exemplo do método:

$( document ).on("click", "element", function() { 
  alert("I've been clicked!"); 
 }); 

Mais Informações:

Para mais informações, por favor visite o site oficial .