Tutorial do jQuery (parte 4)

Propaganda

Hoje vamos aumentar um pouco e realmente mostrar onde o jQuery brilha - eventos. Se você seguiu os tutoriais anteriores, agora deve ter um bom entendimento do estrutura básica de código do jQuery Tutorial do jQuery - Introdução: Noções básicas e seletoresNa semana passada, falei sobre a importância do jQuery para qualquer desenvolvedor web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... consulte Mais informação (e todas as chaves horríveis que o acompanham), bem como encontrar elementos do DOM e algumas das coisas que você pode fazer para manipulá-las Introdução ao jQuery (Parte 2): Métodos e FunçõesIsso faz parte de uma introdução contínua para iniciantes à série de programação da web jQuery. A Parte 1 abordou os conceitos básicos do jQuery de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... consulte Mais informação . Eu também mostrei como acessar o console do desenvolvedor no Chrome

Descobrir problemas do site com ferramentas para desenvolvedores do Chrome ou FirebugSe você seguiu meus tutoriais do jQuery até agora, talvez já tenha encontrado alguns problemas de código e não saiba como corrigi-los. Quando confrontado com um código não funcional, é muito ... consulte Mais informação e como você pode usá-lo para depurar seu código jQuery.

Eventos - entre outros usos - permitem que você reaja a coisas que acontecem na página e nas interações do usuário - clique, rolagem e todas essas coisas sofisticadas.

O que é um evento de qualquer maneira?

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

Por exemplo, tocar na tela do iPhone gerará um único "evento de toque" com uma coordenada x, y exatamente onde você tocou. Se você tocou em um objeto específico, como um botão, é provável que o botão estivesse ouvindo esse evento e executaria alguma ação em conformidade. 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: clicar

Talvez o evento mais fácil de escutar seja o clique, disparado sempre que um usuário clica em um elemento. Este não precisa ser um "botão" específico - você pode anexar um ouvinte de evento a qualquer coisa na tela, mas como desenvolvedor da Web, obviamente, você precisa tornar isso intuitivo. Criando um pseudo-botão fora da letra uma escondido dentro de um parágrafo de texto é possível, mas um tanto estúpido.

Os métodos para anexar um ouvinte de evento mudaram significativamente ao longo dos anos à medida que o jQuery se desenvolveu, mas esse é o método atualmente aceito, usando em():

$(seletor).em(evento,açao);

Para ouvir um "clique”Em qualquer elemento da classe .clickme, e, em seguida, registre uma mensagem no console que contém o texto do elemento clicado, você faria:

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

Você deve ver que a ação que incorporamos aqui é uma função anônima que usa o isto seletor (que se refere a qualquer objeto que o jQuery esteja lidando no momento) - nesse caso, a coisa que foi clicada. Em seguida, extraímos o texto desse objeto clicado e o registramos no console. Fácil né?

Pare a ação padrão:

Em algum momento, convém anexar 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ê deseja fazer alguma mágica AJAX ou jQuery especial.

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

$ ("# myForm"). on ("enviar", função (evento) { console.log (evento); event.preventDefault (); retorna falso; });

Algumas mudanças aqui - em primeiro lugar, estamos anexando ao enviar evento em vez de clicar. Isso é mais apropriado ao lidar com um formulário, pois o usuário pode espaço de tabulação, bater entrarou pressione um enviar botão - 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 à dados do evento. Em seguida, usamos o event.preventDefault () em combinação com retorna falso para impedir que todas as ações usuais sejam concluídas.

Nesse caso, ele está apenas registrando o evento no console, mas na realidade você provavelmente teria um manipulador AJAX aqui, que abordaremos na próxima lição.

Eventos também podem ser acionados por você

Nos dois exemplos anteriores, usamos o método on para ouvir um evento, mas você também pode acionar manualmente um evento chamando-o como método. É difícil entender 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 instrutiva sobre o 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 comecem a digitar imediatamente seus detalhes de login.

$ (document) .ready (function () { $ ('# nome de usuário' .focus (); });

Se você também anexou um ouvinte de evento de foco a esse campo de nome de usuário, ele também seria acionado quando você forçasse 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 veja qual saída você obtém do console sobre os dados do evento.

Vou deixá-lo lá hoje, quando chegamos ao final desta minissérie de tutoriais do jQuery. No final, você deve ter confiança suficiente para lançar jQuery em 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