Eventos e jQuery

Você deve lembrar que o objeto document, que representa o DOM além dos demais elementos HMTL, permite que monitoremos vários eventos diferentes, tornando possível disparar determinadas ações/funções que reagem conforme esses eventos acontecem.

No jQuery, a maioria dos eventos de DOM tem um método jQuery equivalente. Por exemplo, para definir um evento de clique a todos as tags de parágrafo de uma página, podemos fazer assim:

$("p").click();

O próximo passo é definir o que deve acontecer quando esse evento dispara. Você deve passar uma função ao evento:

$("p").click(function () {
  // ação a ser tomada!
});

$(document).ready()

Esse evento, registrado a partir do elemento raiz document, permite que a função seja somente disparada quando a página estiver totalmente carregada. Ele previne que qualquer código jQuery seja executado antes que todos os elementos HTML estejam carregados. É uma boa prática esperar o documento estar todos carregado para começar a trabalhar em cima dele.

$(document).ready(function () {
  // só será executado após o carregamento completo da página
});

Dica: Para ver os outros tipos de eventos que podem ser monitorados com o jQuery, consulte a documentação.

O método on()

O método on()permite que se atribua diversos manipuladores de eventos aos elementos selecionados:

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

Até aqui, aprendemos como selecionar um ou mais elementos HTML utilizando a função construtora do jQuery. O próximo passo, utilizando o jQUery, é realizarmos algum tipo de ação em cima desse(s) elemento. Veremos isso a partir da próxima aula.