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ê.

https://codepen.io/Andre-LPDZ/pen/bGaeZvy

Comentários

Postagens mais visitadas deste blog

Temperamento - Decubra seu Perfil Profissional

Temperamento - Como ele impacta em meu perfil profisional