Conteúdo principal

Programação

Curso: Programação > Unidade 6

Lição 5: Eventos DOM

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?

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.