¿Qué son los eventos?
Lee el artículo ¿Qué son los eventos?
¿Qué es un evento?
¿Qué formas tenemos de manejar eventos en JavaScript?
- Mediante atributos HTML. Por ejemplo:
<button onClick="..."></button>. - Mediante propiedades Javascript. Por ejemplo:
.onclick = function() { ... }. - Mediante
addEventListener(). Por ejemplo:.addEventListener("click", ...).
De todas las formas que tenemos para manejar eventos en JavaScript, ¿cuál es la más aconsejable por norma general?
Mediante addEventListener().
Modelo de eventos en línea → Eventos mediante HTML
Mira el siguiente vídeo:
Preguntas a responder tras la visualización del vídeo:
- ¿Qué web podemos usar para consultar todos los eventos que existen?
- ¿A qué hace referencia la palabra clave
this? - ¿Qué alternativa existe al uso de
this? - ¿La función
cambiardebe declararse antes de usarse? - ¿Hay acciones que desencadenan varios eventos?
- ¿Cómo podemos hacer para que un elemento
hrefno ejecute la acción por defecto? - ¿Qué permite hacer el atributo
onloaddelbody? - ¿Es recomendable usar el modelo de eventos en línea? ¿Por qué?
Lee el artículo Eventos mediante HTML
¿Qué atributo tenemos que añadir al elemento button para que dispare un evento de click?
¿Qué fallo tiene la siguiente línea de código: <button onClick="alert("Hello!")">Saludar</button>?
¿Es HTML case-sensitive?
No.
¿Es JavaScript case-sensitive?
Si.
En general, ¿es buena práctica incluir llamadas a funciones JavaScript en nuestro código HTML?
No. Es mejor localizar los elementos HTML desde el fichero JS.
Modelo de eventos tradicional → Eventos mediante JavaScript
Mira el siguiente vídeo:
Preguntas a responder tras la visualización del vídeo:
- ¿Cómo cambiamos el contenido de un elemento HTML?
- ¿Cómo podemos hacer que un evento
onclickse ejecute una y solo una vez? - ¿Es necesario tener un elemento
buttono uninputpara ocurra el eventoonclick? - ¿Es necesario que se cargue completamente la página para ejecutar las funciones DOM que asignan manejadores a los elementos HTML?
- ¿Cuál de las siguientes es la forma correcta de asociar un evento: 1.
.onclick = miMensaje.onclick = miMensaje()
- ¿Es recomendable usar el modelo de eventos tradicional? ¿Por qué?
Lee el artículo Eventos mediante JavaScript
¿Qué diferencia hay entre una propiedad y una función en JavaScript?
En JavaScript, la propiedad .onclick ¿puede ir en mayúsculas y minúsculas indistintamente? Es decir, ¿puedo escribir tanto .onclick como .onClick?
Modelo de eventos del W3C → El método addEventListener
Mira el siguiente vídeo:
Preguntas a responder tras la visualización del vídeo:
- ¿Cuál es la forma correcta de añadir el evento de click?
document.getElementById("w3c").addEventListener(onclick, saludarUnaVez, false)document.getElementById("w3c").addEventListener("click", saludarUnaVez, false)document.getElementById("w3c").addEventListener("click", saludarUnaVez(), false)document.getElementById("w3c").addEventListener("click", "saludarUnaVez()", false)document.getElementById("w3c").addEventListener("onclick", saludarUnaVez, false)document.getElementById("w3c").addEventListener(onclick(), saludarUnaVez(), false)
- ¿Podemos añadir al mismo elemento dos eventos de diferente tipo al mismo tiempo?
- ¿Podemos añadir al mismo elemento dos eventos del mismo tipo al mismo tiempo?
- ¿Cuál es la función para borrar un
EventListener?.deleteEventListener().delEventListener().archiveEventListener().removeEventListener()
Lee el artículo El método addEventListener
¿Qué tres formas existen de añadir el evento de click a un botón utilizando únicamente JavaScript?
- Utilizando la propiedad de JavaScript
onclick. - Utilizando la función
setAttribute(). - Utilizando la función
addEventListener().
¿Es necesario que la función que pasamos como parámetro a la función addEventListener() tenga nombre?
addEventListener() tenga nombre?No.
¿Se pueden añadir varios listeners utilizando la función .addEventListener() sobre el mismo evento de manera sencilla?
.addEventListener() sobre el mismo evento de manera sencilla?Si.
¿Qué hace el la opción once del tercer parámetro de la función addEventListener()?
¿Se puede borrar una función anónima con .removeEventListener()?
.removeEventListener()?Sólo si la hemos guardado en una variable antes de llamar a addEventListener().
(Voluntario) Para saber más…
Lee el artículo Escuchar eventos y handleEvent.
Lee el artículo El objeto Event.
Lee el artículo ¿Qué son los Custom Events?
¿Podemos crear eventos personalizados en JavaScript sin el uso de bibliotecas externas?
¿Podemos disparar eventos desde código JavaScript?
Si.
¿Podemos añadir información adicional al crear un objeto Event de la siguiente manera: const event = new Event("click", { detail: 123 });?
const event = new Event("click", { detail: 123 });?No.
Lee el artículo Emisión de eventos.
Lee el artículo Propagación de eventos.
¿Qué son los eventos de navegador?
Lee el artículo Eventos de navegador: ¿Qué son?
¿En qué consiste la desestructuración?
Eventos de teclado
Lee el artículo Eventos de teclado
¿Cuál es el objeto de navegador para capturar eventos del teclado?
El objeto KeyboardEvent.
¿Cómo podemos diferenciar entre el 7 de arriba del teclado con el 7 del numpad en un KeyboardEvent?
KeyboardEvent?Mediante la propiedad location.
¿Está el evento "keycode" obsoleto?
No.
¿Está el evento "keydown" obsoleto?
No.
¿Qué hace const { key, code } = ev;?
¿Cómo se llama la tecla del logo de windows en un evento de teclado de JavaScript?
La tecla del logo de Windows es llamada metaKey.
Eventos de puntero
Lee el artículo Eventos de puntero.
¿Qué evento usamos para trabajar con eventos realizados por el usuario con el ratón en JavaScript?
MouseEvent, TouchEvent o PointerEvent, siendo esta última la más conveniente ya que engloba a las dos anteriores.
¿Sabrías decir más de 5 tipos de dispositivos apuntadores?
Ratones, trackballs, lápiz óptico, touchpad, multitouch, trackpoint, etc.
¿Cuándo se dispara el evento auxclick de un PointerEvent??
auxclick de un PointerEvent??Cuando hacemos click con el botón derecho.