jQuery - Eventos
Os eventos em JQuery, conforme mostrado na última aula, pouco diferem dos eventos Javascript, tendo apenas pequenas diferenças de nome e na sintaxe. Vejamos na tabela abaixo alguns exemplos.
Evento | Descrição | Evento em Vanilla JS |
---|---|---|
click | Clique em um elemento | onclick |
dbclick | Duplo clique em um elemento | ondbclick |
mouseenter | Cursor sobre o elemento | onmouseover |
mouseleave | Cursor deixa de estar sobre um elemento | onmouseout |
keypress e keydown | Alguma tecla é pressionada | onkeypress e onkeydown |
keyup | Alguma tecla é solta | onkeyup |
change | Alguma mudança em um campo de formulário | onchange |
focus | Algum campo de formulário é selecionado | onfocus |
blur | Saída do campo de formulário que estava selecionado | onblur |
load ou ready | A página é carregada | onload |
resize | A janela do browser é redimensionada | onresize |
scroll | A barra de rolagem é acionada (subir e descer a página) | onscroll |
Sintaxe dos eventos jQuery
$("elemento").evento(function(){
// código a ser executado quando ocorrer o evento
});
O evento Ready
Um evento muito importante em desenvolvimento web, é o evento ready. Este evento acontece sempre que a página é completamente carregada. Se colocarmos todo o nosso código dentro deste evento, evitamos por exemplo realizar uma função em um elemento que ainda não foi carregado, o que geraria um erro.
$(document).ready(function(){
// Código JS / jQuery
});
A partir de agora, vamos sempre garantir o carregamento total da página com o evento ready antes de executar nosso código. Porém, em jQuery, foi criada uma maneira ainda mais fácil de usar este evento:
$(function(){
// Código JS / jQuery
});
Esta forma não é muito intuitiva, pois não há o nome do evento, mas é bem conhecida por desenvolvedores e é a forma mais amplamente usada em páginas que utilizam jQuery.
O método On
O método on é uma maneira alternativa de se trabalhar com os eventos.
$("elemento").on("evento", function(){
// código a ser executado quando ocorrer o evento
});
A princípio parece não fazer muito sentido usar o método on, já que estamos simplesmente adicionando mais código para fazer a mesma coisa. Mas a vantagem do método on é que vários eventos podem ser definidos ao mesmo tempo para um elemento.
$("elemento").on({
click: function(){
// Código a ser executado no evento click
},
mouseenter: function(){
// Código a ser executado no evento mouseenter
},
mouseleave: function(){
// Código a ser executado no evento mouseleave
}
});
Note que o que é passado como argumento do método On é um objeto. Este objeto tem os nomes dos eventos nas chaves e as funções nos valores.
Desafio
Vamos agora a um pequeno desafio para começarmos a nos familiarizar com a sintaxe do jQuery. Abaixo há um input com o id nome. Ao lado há um botão com id confirmar que está escondido (display: none).
Quando algo for digitado no campo de nome, mostre o botão confirmar. Atenção pois se o campo estiver vazio, o botão deve ser escondido novamente.