Cargando...

El objeto event

En la pared del museo hay una placa. La caja exterior es #wall. Dentro, #plaque guarda un enlace, #seal. En el enlace se lee open, y href es /wing. Debajo, #slip dice blank.
El navegador entrega a la función un objeto. El parámetro se llama event. event.type es la clase de evento. Un clic deja esa cadena en click. event.target es el elemento donde cayó el clic. event.currentTarget es el elemento donde está este oyente. Coinciden solo cuando el clic y el oyente comparten un elemento.
El sello es un enlace. preventDefault cancela el salto a /wing. Después de la llamada, event.defaultPrevented es true. Si no llamas, la bandera sigue en false. El clic viaja hacia fuera: sello, placa, pared. stopPropagation en la placa corta ese viaje, y el oyente de la pared no corre.
El script de la página hace clic en el sello una vez. La línea bajo la placa es click / seal / plaque / true / quiet. Aquí no se asigna onclick, no se llama a removeEventListener y no se crea un elemento.

El objeto que pasa el navegador

La página anterior era el perchero. wool y silk no tenían parámetro y no podían leer este objeto. Su línea era wool silk / 2 / peg. La página del timbre asignaba onclick y leía this. Esta página no. getElementById solo te da la pared, la placa, el sello y la ficha.
addEventListener solo guarda la función. El objeto llega cuando el clic ejecuta la función, no al añadir el oyente. Lee currentTarget dentro de la función. Cuando la función vuelve, esa propiedad es null.

Qué informa un clic

La ficha empieza en blank. El texto del enlace sigue siendo open. Lee las filas en orden. Cada fragmento parte de esa pared nueva, salvo la fila de la página, que es la demo de abajo. Esa demo no llama a removeEventListener.

📊 Qué informa un clic

Momento Qué lees Texto de la ficha Confusión fácil
oyente en el sello, seal.click(), leer el tipo event.type click leer el id como si fuera el tipo
oyente en la placa, clic en el sello, target event.target.id seal leer currentTarget
el mismo clic, currentTarget event.currentTarget.id plaque leer target
preventDefault en el sello, luego la bandera event.defaultPrevented true creer que el enlace aún sale
sin preventDefault event.defaultPrevented false creer que todo oyente cancela el enlace
stopPropagation en la placa, la pared también oye marks unidos plaque esperar plaque wall
script de la página, un click la línea click / seal / plaque / true / quiet la línea termina en wall

Un clic en el sello es un solo objeto. Todos los oyentes del camino ven el mismo. type no cambia. target no cambia. currentTarget sí: es el elemento cuyo oyente se está ejecutando ahora.
preventDefault habla con la acción predeterminada del navegador. En este enlace, esa acción es seguir /wing. La llamada no quita un oyente de la lista. stopPropagation habla con el viaje. No cancela el enlace. Llamar a uno no es llamar al otro.
join(" ") solo pone un espacio entre palabras que ya están en marks. Aquí no se une una lista vacía. La ficha empieza con la palabra blank y cambia solo dentro de un oyente, o en el script de la página después del clic.

El tipo

El oyente está en el sello. La función nombra el parámetro event y escribe event.type en la ficha. Luego corre seal.click().

Leer el tipo

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);

La salida es click. El tipo es la clase de evento, no el id ni la palabra open.

El elemento donde cayó el clic

Pared nueva. El oyente está en la placa, no en el sello. El clic igual cae en el sello. event.target es ese elemento, así que event.target.id es seal.

Leer el target

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);

La salida es seal. El elemento del oyente es la placa. target no informa la placa. Informa el elemento bajo el clic.

Dónde está el oyente

La misma pared nueva, oyente todavía en la placa, clic todavía en el sello. La ficha escribe ambos id: primero target, luego currentTarget.

Leer ambos id

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);

La salida es seal plaque. La primera palabra es el clic. La segunda es el elemento dueño de este oyente. Si pones el oyente en el sello y haces clic en el sello, ambos id son seal, porque el clic y el oyente comparten un elemento. Esta lectura usa la placa, así que los id difieren. Lee currentTarget dentro de la función. Al volver, es null.

Cancelar el enlace

El href del sello es /wing. La acción predeterminada de ese clic es seguir el enlace. preventDefault cancela esa acción. No quita el oyente. Justo después, event.defaultPrevented es true.

Cancelar el enlace

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);

La salida es true. Sin preventDefault, la misma lectura es false. La ficha diría false y la acción del enlace seguiría en pie. stopPropagation no pone esta bandera.

El clic viaja hacia fuera

El sello está en la placa y la placa en la pared. Un clic en el sello llega al oyente de la placa y luego al de la pared, salvo que el viaje se corte. stopPropagation en la placa lo corta. La función de la pared no corre. preventDefault no corta el viaje.

Cortar el viaje

javascript 
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);

La salida es plaque. La palabra wall no entra en marks. Sin stopPropagation, el mismo clic escribiría plaque wall. La demo de abajo corta el viaje y también cancela el enlace.

Una línea bajo la placa

El script va al final del body, cuando ya existen la pared y los párrafos. El oyente del sello llama a preventDefault. El de la placa llama a stopPropagation y guarda el tipo, el id de target, el id de currentTarget y la bandera. El de la pared pondría heard en wall, pero el viaje ya está cortado, así que heard sigue en quiet. La línea se escribe después de seal.click(), cuando la pared ya tuvo su turno.

Demo de la página — placa del museo

html 
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>

La línea queda click / seal / plaque / true / quiet. El tipo es click. El id de target es seal. El id de currentTarget es plaque, porque ese oyente está en la placa. La bandera es true, porque el oyente del sello llamó a preventDefault antes de que la placa la leyera. La última ficha es quiet, no wall, porque stopPropagation corrió en la placa. El texto open no está en la línea. La ficha pasa a click seal plaque. La página siguiente es la delegación. El sello ya está en el marcado. Aquí no se añade un hijo después del oyente.

Cinco comprobaciones en la placa

  1. Pon el oyente en el sello y haz clic. La ficha es click.
  2. Pon el oyente en la placa, haz clic en el sello y lee event.target.id. La ficha es seal.
  3. El mismo oyente escribe ambos id. La ficha es seal plaque. Un oyente en el propio sello escribiría seal seal.
  4. Llama a preventDefault y lee event.defaultPrevented. La ficha es true. Sin la llamada, es false.
  5. Llama a stopPropagation en la placa mientras la pared también oye. marks se une en plaque. Lee la línea: click / seal / plaque / true / quiet.

Dónde engaña esta placa

El enlace sigue diciendo open. La ficha no es el texto del enlace.

  • Esperar que el argumento de la función sea el elemento sello y no el objeto del evento
  • Leer event.target cuando querías el elemento del oyente
  • Leer event.currentTarget cuando querías el elemento bajo el clic
  • Esperar que preventDefault quite el oyente, como removeEventListener en el perchero
  • Esperar que stopPropagation cancele el salto a /wing
  • Esperar que el oyente de la pared corra tras stopPropagation en la placa
  • Leer event.currentTarget después de que la función vuelva y esperar plaque
  • Asignar onclick o leer this y typeof null; eso era el timbre
  • Crear el enlace con createElement; eso era una página anterior
  • Leer la línea como si terminara en wall, o como wool silk / 2 / peg

Qué se queda

  • event.type después de un clic es click
  • Oyente en la placa y clic en el sello: event.target.id es seal
  • En ese mismo clic, event.currentTarget.id es plaque
  • Con el oyente en el sello, target y currentTarget son ambos seal
  • preventDefault pone event.defaultPrevented en true; sin la llamada queda false
  • stopPropagation en la placa impide que corra el oyente de la pared
  • La línea es click / seal / plaque / true / quiet

🧠 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 51 de 52
Javascript Tutorial