Cargando...

Detectores de eventos

En el guardarropa hay una percha. El botón es #peg y dice hang. Debajo, #ticket dice blank.
La página anterior era el timbre y la propiedad onclick. Allí había un solo hueco. La segunda función sustituía a la primera. Aquí no escribimos esa propiedad. typeof y this también eran de aquella página.
Esta página es addEventListener. Añade la función a la lista de clic del botón. Esa línea no la ejecuta. El ticket sigue en blank hasta que llamas a peg.click().
Añades wool y luego silk. La segunda no aparta a la primera. Un clic ejecuta las dos: primero wool, después silk. El ticket queda wool silk. El texto del botón sigue siendo hang.
Si pasas la misma función wool dos veces, la segunda vez no añade nada. Un clic, una ejecución.
removeEventListener quita la función que tú añadiste. Una función nueva, aunque copie las líneas de wool, es otro objeto. wool se queda.
El script de la página añade las dos y hace clic una vez. La línea bajo la percha es wool silk / 2 / peg. Aquí no se crea un elemento, no se escribe un estilo y no se lee el argumento del evento. Eso es la página siguiente.

Dos ganchos, no un hueco

getElementById solo te da el botón y el párrafo del ticket. Cada llamada a addEventListener puede poner otro oyente al lado. El clic recorre la lista de principio a fin. Estas funciones no reciben parámetro. El objeto evento es la página siguiente.

Quién escucha

El botón empieza con hang y debajo está blank. Lee las filas en orden. Cada fragmento parte de ese botón nuevo, salvo la fila de la página, que es la demo de abajo. Esa demo no quita a nadie.

📊 Quién escucha

Momento Quién escucha Texto del ticket Confusión fácil
click y aún no hay oyente nadie blank un clic vacío escribe wool
addEventListener de wool, antes del click wool blank la propia llamada escribe wool
click solo con wool wool wool el texto del botón pasa a wool
wool y luego silk, un click ambos, wool y luego silk wool silk solo corre el segundo
removeEventListener de wool y luego click silk silk siguen corriendo los dos
script de la página, un click ambos wool silk la línea termina en hang

addEventListener("click", wool) pone wool al final de la lista de clic. No llama a wool. peg.click() dispara un clic y recorre la lista desde el principio. El texto del botón no cambia.
Si luego añades silk, se sienta detrás de wool. Las dos se ejecutan. El orden es el orden en que las añadiste.
El mismo objeto función no se añade dos veces. peg.addEventListener("click", wool) y otra vez la misma línea dejan una lista de uno. Un clic ejecuta wool una vez. parts.length es 1 y el ticket es wool.
removeEventListener("click", wool) quita ese objeto. silk se queda, si la añadiste. Una función nueva que también hace push de "wool" no coincide. Después de peg.removeEventListener("click", function () { parts.push("wool"); }) la wool original sigue en la lista. El clic sigue escribiendo wool.
join(" ") solo pone un espacio entre las palabras que ya están en parts. Aquí no unimos una lista vacía. El ticket empieza con la palabra blank y solo cambia dentro de un oyente.

Todavía no escucha nadie

El archivo abre con el botón y el párrafo. No hay oyente. El clic corre, y estos dos registros preguntan el ticket y la palabra del botón.

Percha en silencio

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

Los registros son blank y hang. La lista de clic estaba vacía. El párrafo no cambió.

El oyente espera

addEventListener guarda wool. El cuerpo no corre en esa línea. parts sigue vacío, el ticket sigue blank y el botón sigue diciendo hang.

Añadir, no ejecutar

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);

Los registros son blank, 0 y hang. wool está en la lista. Nadie la ha llamado, así que parts no tiene palabra.

click ejecuta a quien está en la lista

Este fragmento vuelve a empezar en el botón nuevo. Solo se añade wool y luego peg.click(). El ticket pasa a wool. El texto del botón sigue hang. parts.length es 1.

Un oyente

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);

Los registros son wool, hang y 1. Un oyente, una palabra. hang sigue siendo el botón.

silk se sienta junto a wool

Botón nuevo. Primero wool, luego silk, y solo entonces un click. No hay clic entre las dos altas. wool mete "wool" y lo escribe. silk mete "silk" y escribe las dos palabras con un espacio. El ticket es wool silk. parts.length es 2. El botón sigue hang.

Corren los dos

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);

Los registros son wool silk, 2 y hang. silk no borró a wool. Un clic recorrió la lista en el orden de alta.

Quitar wool de la percha

Botón nuevo. Se añaden las dos funciones y luego se llama a removeEventListener con la misma función wool. silk se queda. Un click ejecuta solo silk. El ticket es silk, no wool silk. parts.length es 1.

Quitar 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);

Los registros son silk, 1 y hang. wool era el mismo objeto que añadiste, así que salió de la lista. La demo de abajo no quita a nadie.

Una línea bajo la percha

El script está al final del body, cuando el botón y los párrafos ya existen. Añade wool, luego silk, y llama a click una vez. Cada función suma 1 a hits y mete su palabra. La línea junta el texto del ticket, la cuenta y peg.id. No escribe el texto del botón. No lee un argumento de evento.

Demo de la página — percha

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>

La línea es wool silk / 2 / peg. El ticket es wool silk, no blank. La cuenta es 2, porque los dos oyentes corrieron en un clic. La última pieza es el id del botón, peg.id, no la palabra hang. En el botón sigue hang. La página siguiente es el objeto evento. Lee el argumento que estas funciones no toman.

Cinco comprobaciones en la percha

  1. Clic sin oyente. El ticket es blank y el botón es hang.
  2. Añade wool y no hagas clic. El ticket es blank, parts.length es 0 y el botón es hang.
  3. Añade wool y haz clic. El ticket es wool, el botón es hang y parts.length es 1.
  4. Añade wool, luego silk, y haz clic una vez. El ticket es wool silk, parts.length es 2 y el botón es hang.
  5. Añade los dos, quita wool y haz clic. El ticket es silk, parts.length es 1 y el botón es hang. Lee la línea de la página: wool silk / 2 / peg.

Dónde engaña esta percha

En el botón sigue hang. La lista tenía las dos funciones, o solo silk, o a nadie.

  • Esperar que el segundo addEventListener sustituya al primero, como hacía onclick
  • Esperar que el propio addEventListener ponga el ticket en wool
  • Esperar que solo corra silk cuando las dos están añadidas
  • Esperar que el texto del botón pase a wool
  • Esperar que removeEventListener con una función nueva quite wool
  • Añadir la misma función wool dos veces y esperar dos ejecuciones
  • Leer aquí onclick, typeof null o this.id; eso era la página del timbre
  • Leer aquí event.target; estas funciones no reciben argumento y el objeto evento es la página siguiente
  • Construir el botón con createElement; eso era una página anterior
  • Leer la línea como blank / 0 / hang

Qué se queda

  • Sin oyente, peg.click() deja el ticket en blank y el botón en hang
  • addEventListener deja el ticket en blank hasta el click
  • Un clic solo con wool pone el ticket en wool y deja el botón en hang
  • wool, luego silk, luego un clic, pone el ticket en wool silk
  • removeEventListener con la misma wool y luego el clic pone el ticket en silk
  • La misma wool añadida dos veces corre una vez, y una función nueva no la quita
  • La línea de la página es wool silk / 2 / peg

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 50 de 52
Javascript Tutorial