Tratamento de eventos com jQuery

O eventos são situações que ocorrem dentro do nosso documento HTML, pode ser acionado por situações do próprio sistema ou por ações do usuário. Em ambos os casos, quando ocorre um evento, é possível fazer um pós-processamento usando jQuery, para que possamos obter melhores efeitos em nossos programas.
Isto é de extrema importância, pois conhecendo este aspecto e com a ajuda do framework podemos dinamizar as nossas páginas web e aplicações.
Esta é a primeira coisa que devemos responder ao trabalhar com eventos em jQuery, Já havíamos dito que eventos são ações ou situações que são acionadas pelo sistema ou pelo usuário, por exemplo, quando o documento termina de carregar o sistema aciona o evento pronto ou pronto, quando um usuário clica em um elemento, um evento homônimo é acionado.
Com esses pequenos exemplos em mente, podemos ver a sintaxe básica para lidar com qualquer tipo de evento, que é o seguinte:

$ (seletor) .on ("eventName", function () {….})

Lembremos ou esclareçamos que o seletor é o nome com o qual vamos localizar o elemento dentro do nosso documento, então com a ajuda do método .em () Podemos, então, dizer a qual evento ele deve escutar e, quando detectá-lo, pode executar uma função anônima dentro de nossa seção de script do HTML.
Algo interessante que podemos destacar é que podemos usar um manipulador para vários eventosOu seja, podemos realizar a mesma ação para várias situações, basta listar os diferentes eventos que devem ser ouvidos, a sintaxe é muito semelhante à que acabamos de ver.
$ (seletor) .on ("eventname1 eventname2 eventname3….", function () {….})
Já que sabemos o mais básico, devemos também começar a saber que jQuery Isso sempre tornará nossas vidas mais fáceis como desenvolvedores, por isso forneceu alguns atalhos para criar manipuladores de eventos, com isso não precisamos fazer a declaração completa como vimos na parte anterior, mas aplicamos esses atalhos diretamente ao seletor.
Vejamos alguns dos atalhos mais interessantes usados ​​pelos desenvolvedores, deve-se notar que não é a lista completa dos disponíveis, para obter esta lista é melhor ir diretamente para a documentação oficial, no entanto, para começar um pouco no assunto, estes são mais do que suficientes.
pronto ()É executado quando todos os elementos do documento SOL eles são carregados, ou seja, quando o site está pronto, daí seu nome. Deve-se observar que este é um evento do sistema.
enviar ()Acontece quando fazemos um envio de formulárioO interessante é que quando o formulário ocorre, ele não está enviando da maneira tradicional, mas sim aguardando o que esse evento o informa, então podemos utilizá-lo como um ponto intermediário para validações de campo para citar um exemplo de seu uso.
clique ()Ele é executado quando o usuário faz clique com o ponteiro do mouse sobre um elemento, pode ser de um campo de tipo de entrada, para incluir elementos como ou as âncoras . Como podemos saber é um evento disparado pelo usuário.
desfocar ()Ocorre quando o elemento em que estamos no momento está fora de foco, por exemplo, estamos escrevendo em um campo de texto e vamos para um próximo campo, neste caso o primeiro campo perdeu o foco e este evento é executado.
foco ()Ao contrário do evento anterior, isso ocorre apenas quando focamos em um elemento.
flutuar ()Este evento acontece quando passamos o ponteiro do mouse sobre algum elemento do SOL, geralmente pode ser aplicado a e âncoras .
select ()Ocorre quando selecionamos um elemento em um campo selecionarPor exemplo, temos uma lista suspensa e escolhemos um item de seu conteúdo.
mudança ()Ocorre quando o valor ou estado de um elemento muda, por exemplo, dentro de um campo selecionar, quando mudamos a opção que vemos refletida ali.
Já que sabemos um pouco sobre os eventos mais usados, vamos gerar um pequeno documento que coloca alguns deles em prática, seja em sua sintaxe completa ou com exemplos, para que possamos experimentar as duas formas.
No código a seguir, veremos como inicialmente vamos escrever com console.log () quando temos o documento em pronto (), então aplicaremos outra mensagem quando passarmos o mouse sobre um para confirmar como funciona flutuar, finalmente veremos como usar clique () Y foco () para exibir outras mensagens. Vejamos o código que descreve o acima:

 Exemplo de evento 1
Passe o mouse sobre esta Div !!

Escreva algo aqui:
Concentre-se em mim:
$ (document) .ready (function () {console.log ("O evento pronto aconteceu !!");}); $ ("# evento hover"). hover (function () {console.log ("Evento hover acontecido!");}); $ ("# Evento Click"). Click (function () {console.log ("disparamos um evento Click PROLONGAR
Isso acontece quando queremos que um elemento tenha diferentes eventos associados, dessa forma podemos organizar melhor nosso código e fornecer múltiplas funcionalidades ao nosso elemento.
Existem duas possibilidades, executar a mesma ação para vários eventos ou executar uma ação diferente para cada um, da forma que quisermos teremos que usar a sintaxe completa, a primeira já definida no início.
Vamos ver como vincular ações diferentes a eventos diferentes para o mesmo elemento. Para isso, devemos usar uma sintaxe básica como a seguinte:

 $ (seletor) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Como podemos ver, ao usar essa forma de sintaxe, evitamos ter que fazer algo como o seguinte:

 $ (seletor) .ShortcutEvent1 (function () {}); $ (seletor) .ShortcutEvent2 (function () {}); 

O que nos permite ser mais organizados, porém ambos são válidos e cabe ao desenvolvedor aplicar o que mais lhe convier.
Como sabemos vincular vários eventos a um elemento, vamos colocá-lo em prática, vamos selecionar os eventos clique () Y foco () Para este exemplo, então vamos aplicá-los a dois elementos, no primeiro elemento vamos gerar a mesma resposta para cada um deles, e no segundo cada evento terá sua própria resposta. Vamos ver o código que devemos executar para atingir nosso objetivo:

 Exemplo de evento 2
Mesmo resultado, vários eventos:

Resultados diferentes por evento:
$ ("# element1"). on ("clique em foco", function () {console.log ("mostramos o mesmo para 3 eventos!");}); $ ("# element2"). on ({click: function () {console.log ("we have clicked on element2");}, focus: function () {console.log ("we have focus on element2");}}); 

Aqui vemos que devemos ter cuidado com a segunda forma de respostas diferentes para eventos diferentes, uma vez que os eventos não estão entre aspas como quando o fazemos na primeira forma, também que devemos colocar entre colchetes {} tudo dentro do método .em (), este é um erro que pode ocorrer muitas vezes, pelo que com este cuidado podemos evitá-lo. Agora vamos ver como fica nosso exemplo quando o executamos em nosso navegador:

PROLONGAR
Notamos o contador com um número 2 quando os eventos no primeiro elemento ocorrem, isso significa que fizemos a mesma ação duas vezes conforme planejado. No segundo elemento notamos que imprimimos as duas ações determinadas no console, embora também vejamos que elas ocorrem em uma ordem diferente daquela que as colocamos, isso porque o evento de foco acontece antes do clique na hierarquia de eventos, especialmente se usarmos a chave ABA para se mover entre os campos.
No final deste tutorial, aprendemos como podemos começar no mundo do tratamento de eventos com jQueryEste é apenas um abridor de boca, no entanto, com esses pequenos recursos, podemos alcançar muitas coisas em nossas aplicações.

Este tutorial ajudou você?
Se não

AJUDE A MELHORAR ESTE TUTORIAL!
Você acha que pode corrigir ou melhorar este tutorial? Você pode enviar sua Edição com as alterações que considerar úteis.
0 usuários editaram este tutorial. Edite e torne-se um especialista reconhecido!
Edite este tutorial

TUTORIAIS SEMELHANTES

Como arrastar e capturar imagens com JQuery UIComo fazer um Spinner ou ícone de carregamento com JQueryPlug-ins e bibliotecas JQuery para desenvolvimento webGrade dinâmica Flexigrid com JQuery e PHPManipulação de JSON com Node.jsTratamento de eventos em Node.jsTratamento de buffers em Node.jsExpressões regulares com Jquery
Nenhum comentário, seja o primeiro!
Não espere mais e entre no SolveticDeixe seus comentários e aproveite a conta de usuário Junte-se a nós!

Criar uma contaCadastre-se GRATUITAMENTE para ter sua conta SolveticRegistre uma conta
IdentificarVocê já tem uma conta? Cadastre-se aquiIdentifique-me em minha conta




Em formação

 Publicados 12 de dezembro de 2014 14:44
 Atualizada 14 de dezembro de 2014 05:44
 Visitas 3,7 K
 NívelProfissional


Tutoriais de JavaScript mais recentes

Como atualizar o NPM com PowerShell no Windows 10
Como arrastar e capturar imagens com JQuery UI
Como fazer um Spinner ou ícone de carregamento com JQuery
Como ter um site traduzido em vários idiomas

Veja mais de JavaScript