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" value="Aprétame">
<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" placeholder="Escribe y pulsa Enter cuando acabes">
<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);
</script>
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)
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios