Jquery tutorial (parte 4) - ouvintes de eventos

Video: Tutorial JQuery 4 - Eventos (resize, scroll)

Hoje nós estamos indo para chutá-la até um entalhe e realmente mostrar onde jQuery brilha - eventos. Se você seguiu os tutoriais anteriores, agora você deve ter uma boa compreensão do estrutura de base do código jQuery (E todas as chaves horríveis encaracolados que ir com ele), bem como a forma como encontrar elementos do DOM e algumas das coisas que você pode fazer para manipulá-los. Eu também mostrei como acessar o console do desenvolvedor do Chrome e como você pode usá-lo para depurar seu código jQuery.jQuery Tutorial - Introdução: Noções básicas & seletoresjQuery Tutorial - Introdução: Noções básicas & seletoresNa semana passada, eu falei sobre o quão importante jQuery é para qualquer desenvolvedor web moderna e por isso que é incrível. Esta semana, eu acho que é hora chegamos nossas mãos sujas com algum código e aprendeu ...consulte Mais informação

Eventos - entre outros usos - deixá-lo reagir a coisas que acontecem na página de usuário e interações - clique, rolagem, e todas essas coisas fantasia.

O que é um evento de qualquer maneira?

Para aqueles novos para a programação que envolve uma interface gráfica de algum tipo, eventos referem-se a qualquer tipo de interação entre o usuário eo aplicação- ou pode ser gerado internamente por algum outro processo. Aplicações escolher os eventos a “ouvir”, e quando esse evento é acionado, eles podem reagir de alguma forma.

Por exemplo, tocar na tela do iPhone vai gerar um único evento “tap” com um x, coordenada y precisamente onde você bateu. Se você bateu em um determinado objeto, como um botão, é provável que o botão foi ouvir para esse evento e irá executar alguma ação nesse sentido. Se fosse apenas uma parte em branco da interface, nada foi anexado ao evento e por isso não vai acontecer nada.

Arrastando o dedo pela tela geraria um outro evento, um que inclui informações sobre o ponto inicial e final do movimento de arrasto, e talvez a velocidade. Eventos nos fornecer uma maneira fácil de reagem às coisas que acontecem.

Fácil: Clicando

Talvez o caso mais fácil de ouvir é o evento clique, disparado 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 para nada na tela, mas como um desenvolvedor web, você obviamente precisa fazer essa intuitiva. Criando um botão de pseudo fora da carta uma escondido dentro de um parágrafo de texto é possível, mas um pouco estúpido.

Os métodos para a fixação de um ouvinte de eventos mudaram significativamente ao longo dos anos como jQuery tem desenvolvido, mas este é o método aceito atual, usando on ():

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

Para ouvir um “clique”Evento de quaisquer elementos com a classe .ClickMe, e, em seguida, registrar uma mensagem para o console que contém o texto do elemento clicado, você faria:

$(".clickme").em("clique",função(){console.registro($(esta).texto())-})-

Você deve ser capaz de ver que a ação que temos incorporado aqui é uma função anônima que usa a esta selector (que se refere a qualquer objeto jQuery está actualmente a tratar) - neste caso, a única coisa que foi clicado. Em seguida, extrair o texto do objeto clicado e log-lo para o console. Fácil, não é?

Video: Tutorial codeigniter 26 - FullCalendar, Eliminar Eventos - Part 4

Pare a ação padrão:

Em algum momento, você vai querer anexar a algo como um link ou formar botão que geralmente faz outra coisa enviar. Nesse caso, é bastante provável que você não quer que a ação original para ser realizado - em vez disso, você quer fazer alguma fantasia AJAX ou magia especial jQuery.

Para evitar que a ação padrão aconteça, temos um método útil chamado preventDefault. Obviamente. Vamos ver como isso funciona quando se lida com um botão de envio para um formulário

$("#myForm").em("enviar",função(evento){console.registro(evento)-evento.preventDefault()-Retorna falso-})-

Algumas mudanças aqui - em primeiro lugar, estamos anexando ao enviar evento em vez de clique. Esta é mais apropriado quando se trata de uma forma como o poder do usuário tab-espaço, acertar entrar, ou bater um enviar botão - tudo o que provocaria a ação padrão do formulário. Também estamos passando a variável evento para a função anônima, para que possamos referem-se ao dados de eventos. Nós, em seguida, usou o event.preventDefault () em combinação com return false para parar todas as ações habituais de concluir.

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

Os eventos podem também ser desencadeada por Você

Nos últimos dois exemplos, foi utilizado o método de ouvir a um evento, mas você também pode disparar manualmente um evento, chamando-o como um método em vez disso. É 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.

Foco é tipicamente usado com campos de entrada para disparar uma mensagem quando o usuário clicar na caixa para digitar o texto - uma mensagem de instrução sobre o formato a utilizar, por exemplo. Mas você também pode usá-lo para forçar o usuário para o campo de nome de usuário quando a página foi carregada - para que eles possam começar imediatamente digitando seus dados de login.

$(documento).pronto(função(){$(`#username`.foco()-})-

Se você também tinha anexado um ouvinte de evento foco para esse campo de nome de usuário, ele também seria acionado quando forçado foco. Eventos, portanto, pode ser tanto acionado e ouviu por.

Por agora, a prática, anexando a vários eventos na página - você pode encontrar uma listagem completa de todos os eventos disponíveis aqui - lembre-se de usar preventDefault se é um link ou botão, e ver o que a saída que você começa a partir do console sobre dados de eventos.

Video: Tapete de Barbante nº 15 - Tutorial Completo - Parte 4 de 4

Vou deixá-lo lá hoje como estamos perto do final deste mini-série de tutoriais jQuery. Você deve, no final do mesmo, estar confiante o suficiente para jogar um pouco de jQuery na sua página e torná-lo fazer alguma coisa. Na próxima semana vamos olhar para AJAX - uma parte importante da web moderna que lhe permite carregar e enviar pedidos em segundo plano sem interromper o usuário.

Como sempre, comentários, perguntas, comentários e problemas acolher abaixo.