logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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.

  

Índice de Aulas