Lección 5: Eventos
Cualquier acción que haga un usuario se denomina Evento
: un botón del teclado, se ha movido el ratón, el scroll se ha cambiado de posición, redimensiona el navegador… y cuando esto ocurre nosotros podemos lanzar una función. Incluso extraer información.
Los eventos más importantes.
- load: Se ha terminado de cargar la página.
- focus: Un
input
recibe el foco. - blur: Un
input
pierde el foco. - animationstart: Empieza una animación.
- animationend: Termina una animación.
- transitionstart: Empieza una transición.
- transitionend: Termina una transición.
- submit: Se envía un formulario.
- scroll: Se mueve el
scroll
. - keydown: Se pulsa una tecla del teclado.
- click: Se hace clic izquierdo con el ratón.
- contextmenu: Se hace clic derecho con el ratón.
- mouseenter: Entra el cursor del ratón.
- mouseleave: Sale el cursor del ratón.
- mousemove: Se mueve el cursor del ratón.
Lista completa la puedes encontrar en la documentación de Mozilla Developer. Veamos algunos ejemplos.
Clic
Ejemplo al hacer click sobre un botón.
<input id="boton" type="button">
<script>
// Variables
const boton = document.querySelector('#boton');
// Evento
boton.addEventListener('click', function(evento) {
console.log('funciono');
}, false);
</script>
Teclado
Ejemplo al pulsar la tecla Enter
.
<input id="campo" type="text">
<script>
// Variables
const campo = document.querySelector('#campo');
// Functiones
function instrucciones(evento) {
if(evento.code === 'Enter') {
alert('Me has pulsado enter');
}
}
// Eventos
campo.addEventListener('keydown', instrucciones);
Scroll
Ejemplo donde imprimo la posición del scroll
.
document.addEventListener('scroll', function(evento) {
const ultimaPosicion = window.scrollY;
console.log(ultimaPosicion)
});
// 123 (distancia en píxeles)

Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios