Revisão: Eventos DOM em jQuery

Adicionando um listener de evento

Você pode adicionar um listener de evento usando on():

    $("#save-button").on("click", function() {
       // Lidar com o evento de clique
    });

Se você precisar acessar detalhes sobre o evento, você pode encontrá-los no objeto de evento jQuery que é passado para a função callback:

    $("#face-pic").on("click", function(event) {
       var mouseX = event.pageX;
       var mouseY = event.pageY;
    });

Disparando eventos

Você pode disparar manualmente um evento em um objeto a partir de seu JavaScript usando trigger:
$("#save-button").trigger("click");

Isso pode ser útil ao testar novas funcionalidades, ou quando você quiser que algum código seja executado quando a página é carregada e depois de algum evento específico.

Verificando a disponibilidade do DOM

Se você quiser garantir que o navegador não execute seu código JS até que o DOM esteja completamente carregado e pronto, você pode passar seu código para ready():

    $(document).ready(function() {
      $("h1").text("Tudo pronto pra isto?");
    });

Uma versão menor para passar seu código para a função jQuery:

    $(function() {
      $("h1").text("Tudo pronto para isto?");
    });

O código não está tão legível quando a versão maior, contudo, recomendamos o uso da função ready().

Observe que se você incluir seu JS em uma tag <script> no final da página, então seu DOM deve estar completamente pronto quando o navegador executar seu JS. Contudo, se você quiser garantir isso, sempre é possível verificar a disponibilidade do DOM.

Mais técnicas de evento

Para se aprofundar mais em eventos jQuery, leia sobre Eventos básicos em jQuery em sua documentação.

Quer participar da conversa?

Entrar

Classificar por:

Nenhuma postagem por enquanto.

Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.