Carregando...

Ouvintes de eventos

No guarda-roupa há um cabide. O botão é #peg e diz hang. Por baixo, #ticket ainda diz blank.
A página anterior era a campainha e a propriedade onclick. Ali havia um só lugar. A segunda função substituía a primeira. Aqui não escrevemos essa propriedade. typeof e this também eram daquela página.
Esta página é o addEventListener. A chamada põe a função na lista de clique do botão. Essa linha não a executa. O ticket fica blank até peg.click().
Acrescentas wool e depois silk. O segundo não empurra o primeiro para fora. Um clique corre os dois: primeiro wool, depois silk. O ticket fica wool silk. O texto do botão continua hang.
Se passares a mesma função wool duas vezes, a segunda vez não acrescenta nada. Um clique, uma execução.
removeEventListener tira a função que tu acrescentaste. Uma função nova, mesmo com as mesmas linhas, é outro objeto. wool fica.
O script da página acrescenta os dois e clica uma vez. A linha por baixo do cabide é wool silk / 2 / peg. Aqui não se cria elemento, não se escreve estilo e não se lê o argumento do evento. Isso é a página seguinte.

Dois ganchos, não um lugar

getElementById só te dá o botão e o parágrafo do ticket. Cada chamada a addEventListener pode pôr outro ouvinte ao lado. O clique percorre a lista do princípio ao fim. Estas funções não recebem parâmetro. O objeto evento é a página seguinte.

Quem escuta

O botão começa com hang e por baixo está blank. Lê as linhas por ordem. Cada trecho parte desse botão novo, salvo a linha da página, que é a demo em baixo. Essa demo não tira ninguém.

📊 Quem escuta

Momento Quem escuta Texto do ticket Confusão fácil
click e ainda sem ouvinte ninguém blank um clique vazio escreve wool
addEventListener de wool, antes do click wool blank a própria chamada escreve wool
click só com wool wool wool o texto do botão passa a wool
wool e depois silk, um click os dois, wool e depois silk wool silk só corre o segundo
removeEventListener de wool e depois click silk silk os dois ainda correm
script da página, um click os dois wool silk a linha acaba em hang

addEventListener("click", wool) põe wool no fim da lista de clique. Não chama wool. peg.click() dispara um clique e percorre a lista desde o início. O texto do botão não muda.
silk, acrescentado a seguir, senta-se atrás de wool. Os dois correm. A ordem é a ordem em que os acrescentaste.
O mesmo objeto função não entra duas vezes. peg.addEventListener("click", wool) e outra vez a mesma linha deixam uma lista de um. Um clique executa wool uma vez. parts.length é 1 e o ticket é wool.
removeEventListener("click", wool) tira esse objeto. silk fica, se o acrescentaste. Uma função nova que também faz push de "wool" não coincide. Depois de peg.removeEventListener("click", function () { parts.push("wool"); }) o wool original continua na lista. O clique ainda escreve wool.
join(" ") só põe um espaço entre as palavras que já estão em parts. Aqui não juntamos uma lista vazia. O ticket começa com a palavra blank e só muda dentro de um ouvinte.

Ainda ninguém escuta

O ficheiro abre com o botão e o parágrafo. Nenhum ouvinte foi acrescentado. O clique corre, e estes dois registos perguntam o ticket e a palavra do botão.

Cabide quieto

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

Os registos são blank e hang. A lista de clique estava vazia. O parágrafo não mudou.

O ouvinte espera

addEventListener guarda wool. O corpo não corre nessa linha. parts fica vazio, o ticket fica blank e o botão continua a dizer hang.

Acrescentar, não executar

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Os registos são blank, 0 e hang. wool está na lista. Ninguém a chamou, por isso parts não tem palavra.

click executa quem está na lista

Este trecho volta a começar no botão novo. Só se acrescenta wool e depois peg.click(). O ticket passa a wool. O texto do botão fica hang. parts.length é 1.

Um ouvinte

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

Os registos são wool, hang e 1. Um ouvinte, uma palavra. hang continua a ser o botão.

silk senta-se ao lado de wool

Botão novo. Primeiro wool, depois silk, e só então um click. Não há clique entre as duas entradas. wool mete "wool" e escreve-o. silk mete "silk" e escreve as duas palavras com um espaço. O ticket é wool silk. parts.length é 2. O botão fica hang.

Os dois correm

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Os registos são wool silk, 2 e hang. silk não apagou wool. Um clique percorreu a lista na ordem de entrada.

Tirar wool do cabide

Botão novo. As duas funções são acrescentadas e depois chama-se removeEventListener com a mesma função wool. silk fica. Um click executa só silk. O ticket é silk, não wool silk. parts.length é 1.

Tirar wool

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Os registos são silk, 1 e hang. wool era o mesmo objeto que acrescentaste, por isso saiu da lista. A demo de baixo não tira ninguém.

Uma linha por baixo do cabide

O script está no fim do body, quando o botão e os parágrafos já existem. Acrescenta wool, depois silk, e chama click uma vez. Cada função soma 1 a hits e mete a sua palavra. A linha junta o texto do ticket, a contagem e peg.id. Não escreve o texto do botão. Não lê um argumento de evento.

Demo da página — cabide

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

A linha é wool silk / 2 / peg. O ticket é wool silk, não blank. A contagem é 2, porque os dois ouvintes correram num clique. A última peça é o id do botão, peg.id, não a palavra hang. No botão continua hang. A página seguinte é o objeto evento. Lê o argumento que estas funções não recebem.

Cinco verificações no cabide

  1. Clica sem ouvinte. O ticket é blank e o botão é hang.
  2. Acrescenta wool e não cliques. O ticket é blank, parts.length é 0 e o botão é hang.
  3. Acrescenta wool e clica. O ticket é wool, o botão é hang e parts.length é 1.
  4. Acrescenta wool, depois silk, e clica uma vez. O ticket é wool silk, parts.length é 2 e o botão é hang.
  5. Acrescenta os dois, tira wool e clica. O ticket é silk, parts.length é 1 e o botão é hang. Lê a linha da página: wool silk / 2 / peg.

Onde este cabide engana

No botão continua hang. A lista tinha as duas funções, ou só silk, ou ninguém.

  • Esperar que o segundo addEventListener substitua o primeiro, como fazia onclick
  • Esperar que o próprio addEventListener ponha o ticket em wool
  • Esperar que só silk corra quando os dois estão acrescentados
  • Esperar que o texto do botão passe a wool
  • Esperar que removeEventListener com uma função nova tire wool
  • Acrescentar a mesma função wool duas vezes e esperar duas execuções
  • Ler aqui onclick, typeof null ou this.id; isso era a página da campainha
  • Ler aqui event.target; estas funções não recebem argumento e o objeto evento é a página seguinte
  • Construir o botão com createElement; isso era uma página anterior
  • Ler a linha como blank / 0 / hang

O que fica

  • Sem ouvinte, peg.click() deixa o ticket em blank e o botão em hang
  • addEventListener deixa o ticket em blank até ao click
  • Um clique só com wool põe o ticket em wool e deixa o botão em hang
  • wool, depois silk, depois um clique, põe o ticket em wool silk
  • removeEventListener com o mesmo wool e depois o clique põe o ticket em silk
  • O mesmo wool acrescentado duas vezes corre uma vez, e uma função nova não o tira
  • A linha da página é wool silk / 2 / peg

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 50 de 52
Javascript Tutorial