O tratamento de eventos é outro dos grandes motivos para usar jQuery. Existem algumas diferenças entre navegadores em como fazer, que o jQuery normaliza em uma API simples, enquanto reforça algumas das melhores práticas.
Há essencialmente um método que você precisa conhecer: .on()- funciona assim:
$("button").on("click", function() ( // do something ));Aqui, fornecemos ao .on()método apenas dois parâmetros. O nome do evento (“clique”) e uma função a ser executada quando o evento ocorrer em qualquer um dos elementos dessa seleção. Lê muito bem, não é?
Pessoas com alguma experiência jQuery anterior pode estar familiarizado com outros métodos de ligação como .bind(), .live()ou .delegate(). Não se preocupe mais com isso, a jQuery moderna combinou todos eles, o .on()que sempre faz a melhor prática.
Ao vincular um evento como fizemos acima, você pode (e normalmente é inteligente) incluir um nome de parâmetro na função. Esse parâmetro será "o objeto de evento" dentro da função:
$("button").on("click", function(event) ( // event => "the event object" ));Por meio desse objeto de evento, você obtém muitas informações. Você já está um pouco familiarizado com ele porque usávamos para .preventDefault()e .stopPropagation(). Mas também há muitas outras informações diretas nesse objeto. Coisas como que tipo de evento foi (no caso de vários eventos dispararem essa mesma função), quando aconteceu, onde aconteceu (coordenadas, se aplicável), em que elemento aconteceu e muito mais. Vale a pena inspecionar o objeto de evento regularmente durante a codificação.
Existe um conceito de delegação de eventos que é extremamente importante no trabalho com eventos. É uma prática recomendada moderna muito inteligente. Ele incorpora a ideia de escopo.
Uma maneira tradicional de pensar sobre associação de eventos é como "encontre todos os botões na página e vincule um evento de clique a eles". Claro que funciona, mas é:
- Não muito eficiente
- Frágil
Não é eficiente porque você está forçando imediatamente o JavaScript a encontrar todos os elementos do botão quando, com a delegação, você poderia estar apenas encontrando um elemento mais fácil de encontrar.
Frágil porque se mais botões forem adicionados à página, eles já perderam o barco na ligação e precisarão ser religados.
Com a delegação de eventos, você vincularia esse evento de clique a um elemento que está mais acima na árvore DOM do que os botões que contêm todos eles. Pode ser um lugar, pode ser o documentpróprio. Ao vincular o evento click a esse elemento superior, você diz que ainda está interessado apenas nos cliques que aconteceram nos botões. Então, quando um botão é clicado, por meio da natureza do borbulhamento de evento, esse clique eventualmente será acionado no elemento superior. Mas o objeto de evento saberá se o clique original aconteceu em um botão ou não, e a função que você definiu para disparar naquele evento será disparada ou não sabendo dessa informação.
Neste screencast, demonstramos assim:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Agora imagine se adicionarmos outro a isso . Não precisamos vincular novamente nenhum evento, porque o evento ainda está felizmente vinculado ao escopo e os eventos ainda irão borbulhar da área de texto recém-adicionada. Isso é particularmente útil em ambientes de aplicativos da web onde você adiciona regularmente novos elementos à página.
Outra coisa boa para saber sobre a associação de eventos jQuery é que eles não são mutuamente exclusivos. Se você adicionar outro manipulador de cliques exatamente ao mesmo elemento que já possui um, ele apenas adicionará outro. Você não está substituindo o anterior. O jQuery apenas lida com isso de forma bastante elegante para você. Você sempre pode desvinculá-los se realmente quiser substituir uma função vinculada anteriormente.
Se for exatamente o mesmo evento, vale a pena saber que, para desvincular um deles específico e não o outro, você precisará atribuir um namespace aos eventos. Isso acontece usando um ponto no nome do evento, como click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), como não mencionamos antes, é como você desassocia eventos.
Existem muitos eventos DOM possíveis. Click é o grande e principal e óbvio, mas há duplo clique, mouseenter e mouse, keydown e keyup, formas específicas como blur e change, e muito mais. Se estiver interessado na lista completa, você pode obter uma como esta.
Você pode vincular vários eventos ao mesmo tempo, desta forma:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Existem algumas circunstâncias em que você está esperando que um evento aconteça, mas uma vez que aconteça, você não se preocupa mais com isso ou explicitamente não deseja mais disparar a função que você vinculou. É disso que .one()trata a função. Um caso de uso padrão para isso é um botão de envio de formulário (se você estiver lidando com Ajax ou qualquer outro). Provavelmente, você deseja desativar esse botão de envio após pressioná-lo, até que possa processar as informações e fornecer o feedback apropriado. Esse não é o único caso de uso, é claro, mas mantenha isso em mente. .one()== apenas uma vez.