Conteúdo principal
Programação
Curso: Programação > Unidade 6
Lição 5: Eventos DOM- Tornando páginas web interativas com eventos
- Adicionando um listener de evento
- Tipos de evento DOM
- Usando as propriedades do evento
- Desafio: O bigode do gato
- Processando formulários com eventos
- Prevenção de comportamento padrão de eventos
- Resumo: eventos DOM
© 2023 Khan AcademyTermos de usoPolítica de privacidadeAviso de cookies
Resumo: eventos DOM
Adicionando listeners de eventos
Para garantir que o navegador chame uma função particular quando um evento acontece em um elemento, você deve usar
document.addEventListener
:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);
Você pode passar várias strings válidas como primeiro argumento, veja o artigo sobre tipos de evento.
Se você quiser informações sobre o evento ocorrido, você pode olhar o objeto de evento que o navegador passa para sua função callback:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
O objeto event tem várias propriedades, você pode ver uma lista completa aqui.
Se você está sobrescrevendo o comportamento do clique em um link ou o comportamento de envio em um formulário, você pode chamar
event.preventDefault()
para evitar o comportamento padrão do navegador.Removendo listeners de eventos
Se você não precisa mais de um listener de evento em particular, você pode removê-lo usando
removeEventListener
:var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// depois...
faceEl.removeEventListener("click", onFaceClick);
Quer participar da conversa?
Nenhuma postagem por enquanto.