Aprenda 15 eventos do jQuery
O JQuery é uma das bibliotecas javascript mais populares e amplamente usadas, desenvolvida e projetada para simplificar a arquitetura DOM baseada em HTML, ou seja, as propriedades do modelo de objeto de documento, como leitura, manipulação e passagem de árvore. As outras propriedades do jQueries, como manipulação de eventos, Ajax, estilo e animação CSS, também são simplificadas. É uma biblioteca de código-fonte aberto e gratuita, usada normalmente em 73% dos aprox. 10 milhões de sites que estão sendo usados hoje. Os principais recursos do Jquery incluem propriedades baseadas em elementos DOM, como seletores, manipulação e passagem em árvore, o que torna o trabalho no JQuery muito mais interessante, fácil e conveniente.
Eventos do jQuery
Aqui estão os seguintes eventos do jQuery com sintaxe fornecida abaixo
1. click()
Este evento ocorre sempre que o elemento é clicado. Esse método click () é usado para acionar o elemento clicado, também conhecido como evento click, usado para anexar a uma função sempre que ocorrer um evento relacionado ao clique.
Sintaxe
$(selector).click()
Quando você deseja anexar uma função a este evento de clique,
$(selector).click(function)
A próxima etapa sempre acompanha a ação e o gatilho que formam o funcionamento e o funcionamento reais da função e, portanto, sempre que o evento é acionado, uma função deve ser passada para o evento.
Exemplo
$("p").click(function(){// action which is triggered goes here!! });
2. dblclick ()
Este método é usado para anexar uma função de manipulador de eventos ao elemento HTML fornecido. Esta função é executada sempre que o usuário clica duas vezes no elemento HTML fornecido.
Sintaxe
$(selector).dblclick()
Exemplo
$("p").dblclick(function(){$(this).hide();});
3. change()
Este evento ocorre sempre que o valor de um elemento específico é alterado, ou seja, funciona apenas para a entrada, área de texto e elementos selecionados. O método change () é usado para acionar um evento de alteração ou aquele que é anexado à função sempre que um evento relacionado à mudança deve ocorrer.
Sintaxe
$(selector).change()
Exemplo
$("input").change(function(){alert("This text related to this has been changed.");});
4. blur()
Esse evento relacionado ao desfoque ocorre apenas quando o elemento perde o foco. O método blur() usado para anexar uma função a ser executada sempre que ocorrer um evento blur. Este método é usado frequentemente com o método focus().
Sintaxe
$(selector).blur()
Exemplo
$("input").blur(function(){alert("The field has lost its focus.");});
5. preventDefault()
Este método event.preventDefault () relacionado ao evento é usado para impedir que a ação padrão de um elemento específico aconteça. Os exemplos desse cenário incluem:
Impedindo o envio de um botão de envio de um formulário
Impedir que um link acesse um URL específico.
Um evento específico, como event.preventDefault (), é usado para verificar se o método ou a função preventDefault () é usada para chamar o evento.
Sintaxe
event.preventDefault()
Exemplo
$("a").click(function(event){event.preventDefault();});
6. focus()
Essa propriedade e o foco desse evento ocorrem quando um elemento é usado para obter o foco que ocorre quando ele é selecionado pelo clique do mouse ou navegando uma guia nele. O método focus () é usado para acionar o evento de foco ou anexar uma função para executar quando ocorrer um evento relacionado ao foco.
Sintaxe
$(selector).focus()
Exemplo
$("input").focus(function(){$("span").css("display", "inline").fadeOut(200);});
7. hover()
Este método de foco é usado para especificar duas funções usadas para executar quando o ponteiro do mouse passa o mouse sobre todos os elementos selecionados. Esse método aciona os eventos mouse e mouse. Se houver apenas uma função especificada, ela será executada para os eventos mouse e mouse.
Sintaxe
$(selector).hover(inFunction, outFunction)
Exemplo
$("p").hover(function(){$(this).css("background-color", "blank");), function()($(this).css("background-color", "yellow");});
8. keydown()
A ordem dos eventos relacionados ao evento de keydown é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keydown()
Exemplo
$("input").keydown(function()($("input").css("background-color", "black");));
9. keypress()
A ordem dos eventos relacionados ao evento de pressionamento de tecla é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keypress()
Exemplo
$("input").keypress (function()($("input").css("background-color", "black");));
10. keyup ()
A ordem dos eventos relacionados ao evento de keyup é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keyup()
Exemplo
$("input").keyup(function()($("input").css("background-color", "black");));
11. load()
O método load é usado para anexar um manipulador de eventos ao evento baseado em carga. O evento load ocorre sempre que um especificado. Este evento ocorre e funciona sempre que os elementos associados ao URL, como imagem, quadro, script, iframe e o objeto da janela. O evento load pode ou não ser acionado e depende do navegador, mesmo que a imagem esteja em cache. Há também um método AJAX, que é um método jquery conhecido como load (), o que é chamado depende dos parâmetros.
Sintaxe
$(selector).load(function)
Exemplo
$("img").load(function()(alert("stuff loaded.");));
12. mousedown()
Este evento ocorre apenas quando o botão esquerdo do mouse é pressionado sobre a lista selecionada do elemento. O método ou a função mousedown () é usado para disparar esse evento que anexa uma função e é executado sempre que um evento mousedown acontece. Esse método geralmente é usado junto com o método mouseup ().
Sintaxe
$(selector).mousedown()
Exemplo
$("div").mousedown(function()($(this).after("Down button pressed with mouse.");));
13. off()
Este método é usado para remover um manipulador de eventos anexado ao método on (). Pode-se dizer que é a substituição do método unbind (), die () e undelegate (). Esse método é usado para trazer muita consistência à API e é sempre recomendável usar esse método, pois isso é usado para simplificar a base de código do Jquery.
Sintaxe
$(selector).off(event, selector, function(eventObj), map)
Exemplo
14. mouseenter()
Esse evento ocorre sempre que o ponteiro do mouse está sobre o elemento especificado e entra quando ele aciona o evento mouseenter ou é usado para anexar uma função que pode ser usada para executar sempre que um evento baseado no mouseenter ocorrer.
Sintaxe
$(selector).mouseenter()
Exemplo
$("p").mouseenter(function()($("p").css("background-color", "black");));
15. mouseleave()
Esse evento ocorre sempre que o ponteiro do mouse está sobre o elemento especificado e sai quando dispara o evento de saída do mouse ou é usado para desanexar uma função que pode ser usada para executar sempre que um evento com base em mouse.
Sintaxe
$(selector).mouseleave()
Exemplo
$("p").mouseleave(function()($("p").css("background-color", "black");));
Espero que você tenha gostado do nosso artigo, criei um arquivo no codepen para auxiliar você.
Comentários
Postar um comentário