Cargando...

Eventos en JavaScript

En la puerta del piso hay un timbre. El botón es #bell y en él pone press. Debajo, #chime todavía dice silent. En el HTML no hay atributo onclick, así que bell.onclick empieza en null.
Una trampa vieja: typeof null en JavaScript es "object". Por eso typeof bell.onclick también es "object", no "null" ni "undefined". La comparación bell.onclick === null es verdadera.
Meter una función en onclick no hace sonar el timbre. El texto sigue en silent hasta que bell.click() ejecuta la función que está en el hueco. El hueco guarda una sola función. Si asignas una segunda, la primera desaparece. Un clic no ejecuta las dos. addEventListener es la página siguiente; allí se apilan oyentes. Esta página no lo llama.
bell.onclick = null vacía el hueco. Un clic después no toca el texto. Dentro de la función, this es el botón, así que this.id es bell. La palabra del botón sigue siendo press. El script de la página hace un clic. La línea bajo el timbre es dong / 1 / bell. Aquí no se crea un elemento ni se asigna una propiedad CSS.

Un hueco en el botón

La página anterior creaba nodos li con createElement y los colocaba con append, prepend e insertBefore. Aquí no se crea un nodo ni se lee children. La página de antes escribió style y classList en una muestra de pintura. Aquí no se asigna style. getElementById solo te da el botón y el párrafo. Lo nuevo es la propiedad onclick: una función, o null.

Qué hay en el hueco

El botón empieza con press y debajo pone silent. Lee las filas en orden. Cada fragmento parte de ese botón limpio, salvo la fila de la página, que es la demo de abajo. Esa demo no asigna null.

📊 Qué hay en el hueco

Momento Qué guarda onclick Texto del timbre Confusión fácil
antes de asignar nada null; typeof es "object" silent leer typeof como "null"
tras la función ding, antes de click una función silent creer que la asignación ya suena
tras click con ding esa función ding que el texto del botón pase a ding
dong sustituye a ding y luego un click la función dong, no ding dong que corran las dos funciones
onclick = null y luego click, botón limpio null; typeof es "object" silent un hueco vacío que aún suena
script de la página, un click una función; this.id es bell dong que la línea acabe en silent

onclick es una propiedad del elemento. Sin manejador, el valor es null, y typeof null sigue siendo "object". Usa === null si quieres saber que el hueco está vacío. La asignación guarda la función. No la llama. bell.click() dispara un clic y ejecuta la función que haya en el hueco en ese momento. El texto del botón no cambia. Una segunda asignación pisa la propiedad. Si guardaste un nombre para la primera función, el objeto sigue en memoria, pero la propiedad ya no apunta a él. onclick = null quita el manejador. Un atributo HTML onclick llenaría el mismo hueco; este botón no lo tiene. Una función flecha en este hueco no pone this en el botón. Esta página usa una function normal.

El hueco empieza vacío

El archivo abre con el botón y el párrafo. Todavía no hay nada asignado. Estas cuatro salidas preguntan la propiedad, su typeof, el texto del timbre y la palabra del botón.

Timbre en silencio

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);

Las salidas son null, object, silent y press. El hueco está vacío. typeof no imprime la palabra null. El botón y el párrafo siguen mostrando las palabras del marcado.

La función espera

onclick = function ... guarda la función. El cuerpo no corre en esa línea. El timbre sigue en silent y la propiedad ya no es null.

Asignar, no sonar

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);

Las salidas son function, silent y false. Hay una función en el hueco. El párrafo no cambió, porque nadie llamó a la función.

click ejecuta la que está

bell.click() ejecuta el manejador actual. El timbre pasa a ding. El texto del botón sigue en press. Después del clic el hueco sigue con una función.

Un clic

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);

Las salidas son ding, press y function. Un clic, un cambio, y el cambio está en el párrafo. La palabra press sigue en el botón.

La segunda función sustituye a la primera

Este fragmento vuelve a empezar en el botón limpio. Primero se guarda ding, luego se escribe dong encima, y solo después llega un click. No hay clic entre las dos asignaciones, así que en esta pasada el timbre nunca es ding. Tras el clic es dong. bell.onclick === ding es false. bell.onclick === dong es true.

Se queda la segunda

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);

Las salidas son false, true y dong. El nombre ding sigue apuntando a una función. La propiedad no. Un clic ejecutó solo dong.

null vacía el hueco

Hazlo en el botón limpio. Se asigna una función y se borra antes de cualquier clic. bell.click() después de null no escribe dong. El timbre sigue en silent. typeof vuelve a ser object, porque el valor es null.

Vaciar el hueco

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);

Las salidas son null, object y silent. La función que habría escrito dong no está en el hueco en el momento del clic. La demo de abajo no vacía el hueco.

Una línea bajo el timbre

El script está al final de body, después del botón y del párrafo. Guarda una función y llama a click una vez. Dentro, taps pasa de 0 a 1, el timbre pasa a dong y this.id se escribe en bell.dataset.who. La línea junta el texto del timbre, la cuenta y ese id. No escribe el texto del botón.

Demo de la página — timbre

html 
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>

La línea queda dong / 1 / bell. El timbre es dong, no silent. El número es 1 porque el script hace un clic. El último trozo es el id del botón, desde this dentro del manejador, no la palabra press. En el botón sigue press. La página siguiente trata de los oyentes de eventos. Su herramienta principal no es este único hueco de onclick.

Cinco comprobaciones

  1. Lee onclick, typeof bell.onclick, el texto del timbre y el del botón. Los valores son null, object, silent y press.
  2. Asigna la función ding y no hagas clic. typeof es function, el timbre sigue en silent y onclick === null es false.
  3. Llama a bell.click() con esa función ding. El timbre es ding, el botón es press y typeof es function.
  4. Asigna ding, luego dong, y haz un clic. onclick === ding es false, onclick === dong es true y el timbre es dong.
  5. En un botón limpio, asigna una función, pon onclick en null y haz clic. Los valores son null, object y silent. La línea de la página: dong / 1 / bell.

Dónde engaña este timbre

En el botón sigue press. En el hueco estaba la función equivocada, o el hueco estaba vacío.

  • Leer typeof bell.onclick como "null" cuando el valor es null
  • Esperar que la asignación misma ponga el timbre en ding
  • Esperar que ding y dong corran juntas en un clic tras la segunda asignación
  • Esperar que el texto del botón pase a ding
  • Esperar que click cambie el timbre después de onclick = null
  • Usar una función flecha y esperar que this.id sea bell
  • Leer event.target aquí; estas funciones no reciben argumento, y el objeto del evento va en una página posterior
  • Llamar a addEventListener aquí; la página siguiente apila oyentes
  • Construir el botón con createElement; eso era la página anterior
  • Leer la línea como silent / 0 / press

Qué te llevas

  • Sin manejador, bell.onclick es null y typeof bell.onclick es object
  • Asignar una función deja el timbre en silent hasta el click
  • bell.click() con la función ding pone el timbre en ding y deja el botón en press
  • La segunda asignación sustituye a la primera, así que un clic solo ejecuta dong
  • onclick = null y luego click en un botón limpio deja el timbre en silent
  • La línea de la página es dong / 1 / bell, y this.id dentro del manejador es bell

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