Conteúdo principal
Programação
Curso: Programação > Unidade 7
Lição 5: Eventos DOM com jQuery- Adição de listeners de evento com jQuery
- Uso de propriedades de evento em jQuery
- Desafio: Identifique o cão
- Quais são as propriedades e os eventos DOM?
- Verificação de disponibilidade de DOM com jQuery
- Revisão: Eventos DOM em jQuery
- Projeto: Alteração de cena
© 2023 Khan AcademyTermos de usoPolítica de privacidadeAviso de cookies
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?
Muito interessante!(2 votos)