Tutorial do jQuery (parte 4) - ouvintes do evento

Propaganda

Hoje vamos começar um pouco e realmente mostrar onde jQuery brilha - eventos . Se você seguiu os últimos tutoriais, agora deve ter um bom entendimento da estrutura básica de código do jQuery jQuery Tutorial - Introdução: Fundamentos e Seletores jQuery Tutorial - Introdução: Noções básicas e seletores Na semana passada, falei sobre como o jQuery é importante para qualquer desenvolvedor web moderno e por que é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... Leia Mais (e todas as chaves horríveis que acompanham isso), bem como encontrar elementos do DOM e algumas coisas que você pode fazer para manipulá-los Introdução ao jQuery (Parte 2): Métodos e Funções Introdução ao jQuery (Parte 2): Métodos e Funções Esta é parte de uma introdução inicial iniciante à série de programação web jQuery. Parte 1 cobriu os fundamentos do jQuery de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... Leia mais. Eu também mostrei a você como acessar o console do desenvolvedor no Chrome. Descobrir os problemas do site com as ferramentas de desenvolvedor do Chrome ou o Firebug. Descobrir os problemas do site com as ferramentas de desenvolvedor do Chrome ou Firebug se você já seguiu meus tutoriais do jQuery até agora. alguns problemas de código e não sabe como corrigi-los. Quando confrontado com um pouco de código não funcional, é muito ... Leia mais e como você pode usá-lo para depurar seu código jQuery.

Eventos - entre outros usos - permitem reagir a coisas que acontecem na página e interações do usuário - clicando, rolando e todas aquelas coisas extravagantes.

O que é um evento de qualquer maneira?

Para os iniciantes em programação que envolvem alguma interface gráfica, os eventos referem-se a qualquer tipo de interação entre o usuário e a aplicação; ou pode ser gerado internamente por algum outro processo. Os aplicativos escolhem quais eventos “ouvir” e quando esse evento é acionado, eles podem reagir de alguma forma.

Por exemplo, tocar na tela do seu iPhone gerará um único "evento de toque" com uma coordenada x, y exatamente onde você tocou. Se você tocar em um objeto específico, como um botão, é provável que o botão esteja atento a esse evento e execute alguma ação de acordo. Se fosse apenas uma parte em branco da interface, nada foi anexado ao evento e, portanto, nada acontecerá.

Arrastar o dedo pela tela geraria outro evento, que inclui informações sobre o ponto inicial e final do movimento de arrasto e, talvez, a velocidade. Os eventos nos fornecem uma maneira fácil de reagir às coisas que acontecem .

Fácil: clicando

Talvez o evento mais fácil de se ouvir seja o evento click, acionado sempre que um usuário clica em um elemento. Isso não precisa ser um "botão" específico - você pode anexar um ouvinte de evento a qualquer coisa na tela, mas como um desenvolvedor da Web, você obviamente precisa torná-lo intuitivo. Criando um pseudo-botão fora da carta um oculto dentro de um parágrafo do texto é possível, mas um pouco estúpido.

Os métodos para anexar um ouvinte de evento mudaram significativamente ao longo dos anos, já que o jQuery foi desenvolvido, mas este é o método aceito atualmente, usando on ():

$(selector).on(event, action); 

Para ouvir um evento de "clique" em qualquer elemento com a classe .clickme e depois registrar uma mensagem no console que contém o texto do elemento clicado, você faria:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Você deve ser capaz de ver que a ação que incorporamos aqui é uma função anônima que usa o seletor (que se refere a qualquer objeto com o qual o jQuery está lidando atualmente) - neste caso, a coisa que foi clicada. Em seguida, extraímos o texto desse objeto clicado e o registramos no console. Fácil, certo?

Parar a ação padrão:

Em algum momento, você vai querer anexar a algo como um link ou botão de envio de formulário que geralmente faz outra coisa. Nesse caso, é bem provável que você não queira que a ação original seja executada - em vez disso, você quer fazer algum AJAX ou mágica jQuery especial.

Para evitar que a ação padrão aconteça, temos um método prático chamado preventDefault. Obviamente. Vamos ver como isso funcionaria ao lidar com um botão de envio de um formulário

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Algumas alterações aqui - em primeiro lugar, estamos anexando ao evento de envio em vez de clicar. Isso é mais apropriado quando se lida com um formulário, pois o usuário pode aba-espaço, aperte enter ou aperte um botão de envio - tudo isso acionaria a ação padrão do formulário. Também estamos passando a variável de evento para a função anônima, para que possamos nos referir aos dados do evento . Em seguida, usamos o event.preventDefault () em combinação com return false para impedir que todas as ações comuns sejam concluídas.

Neste caso, é apenas registrar o evento no console, mas, na realidade, você provavelmente teria um manipulador de AJAX aqui, que abordaremos na próxima lição.

Eventos também podem ser desencadeados por você

Nos últimos dois exemplos, usamos o método on para ouvir um evento, mas você também pode disparar manualmente um evento chamando-o como um método. É difícil ver por que você pode usar isso para forçar um "clique", mas faz mais sentido se olharmos para o evento de foco.

O foco é normalmente usado com campos de entrada para disparar uma mensagem quando o usuário clica na caixa para inserir texto - uma mensagem instrucional no formato a ser usado, por exemplo. Mas você também pode usá-lo para forçar o usuário a entrar no campo de nome de usuário quando a página for carregada - para que eles possam começar imediatamente a digitar seus detalhes de login.

 $(document).ready(function(){ $('#username'.focus(); }); 

Se você também tivesse anexado um ouvinte de evento de foco a esse campo de nome de usuário, ele também seria acionado quando você forçou o foco. Os eventos podem, portanto, ser acionados e ouvidos.

Por enquanto, pratique anexando a vários eventos na página - você pode encontrar uma lista completa de todos os eventos disponíveis aqui - lembre-se de usar preventDefault se for um link ou botão, e ver qual saída você obtém do console sobre os dados do evento.

Eu vou deixar isso lá hoje, enquanto nos aproximamos do final desta minissérie de tutoriais da jQuery. Você deve, até o final, estar confiante o suficiente para jogar um pouco de jQuery na sua página e fazê-lo fazer alguma coisa. Na próxima semana, veremos o AJAX - uma parte importante da web moderna que permite carregar e enviar solicitações em segundo plano sem interromper o usuário.

Como sempre, feedback, perguntas, comentários e problemas são bem vindos abaixo.

Crédito da imagem: tela sensível ao toque via Shutterstock