¿Cómo funcionan los eventos en JavaScript?
Capítulo 31: Introducción a los eventos
Dejamos atrás la parte básica del curso para dar paso al nivel medio. Nivel que voy a inaugurar con una Introducción a los eventos de JavaScript.
¿Qué son los eventos?
Los eventos son una serie de acciones u ocurrencias que pueden desencadenar ciertas cosas.
El código de ciertas acciones, permanecerá inactivo, sin ejecutarse hasta que se produzca un evento, por ejemplo, el usuario pulsa un botón y este realiza algo.
En resumen, podemos hacer que cuando pase algo en concreto, se ejecute una acción.
Disponemos de muchos tipos de eventos que iremos viendo a lo largo del curso. En este capítulo solo probarás el tipo de evento onclick, solo para que puedas ver un ejemplo de uso práctico de los eventos.
¿Qué es un controlador de eventos?
Un controlador de eventos es el mecanismo que necesitas para que se maneje el evento. Por norma general, será una función que se va a llamar en el momento en el que se active el evento.
Por el momento, en esta introducción vamos a poner eventos directamente sobre etiquetas html. Hay otras formas de hacerlo. Las iremos viendo.
Eventos JavaScript sobre html
Veamos un primer ejemplo, un evento que se ejecute en el momento en el que el usuario haga click en un botón.
Tendrás que tener los siguientes archivos para hacer la prueba. Los puedes dejar en la raíz del directorio principal (raíz) o bien, crea carpetas, una para ir guardando archivos .js y otra para los de .css tal y como muestro en el vídeo.
Para realizar este ejemplo, te basta con el archivo .html, ya que vamos a escribir ahí el evento de JavaScript directamente sobre una etiqueta html. La parte del CSS es opcional, ya que este curso no va a estar dedicado a esto, para ello tienes mi curso dedicado a CSS desde cero. No obstante, no está mal que vayas practicando con el manejo de archivos aunque no entiendas demasiado CSS. Con un botón por defecto de html te sirve para hacer esto.
test.html
Este es el código que debes guardar en una página .html.
En lo que te tienes que fijar es en la línea 11. Aquí tienes una etiqueta <button> con un evento de tipo onclick ejecutado directamente desde este botón. En este onclick he puesto un alert() de JavaScript.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Introducción a los eventos</title>
<script src="test.js"></script>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<button onclick="alert('¡Has pulsado el botón!');">¡NO PULSAR!</button>
</body>
</html>test.css
Este es el código que debes guardar en una hoja .css.
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
body{
text-align: center;
margin-top: 7em;
}
button {
padding: 1em 2.1em 1.1em;
display: block;
color: #e8e1df;
background-color: #fbdedb;
display: inline-block;
background: #ec7b6f;
background-color: #f04747;
transition: 0.6s;
font-family: 'Bungee', cursive;
font-size: 2em;
text-align: center;
position: relative;
border-radius: 1.5em;
box-shadow: 0em -0.6rem 0.1em rgba(0, 0, 0, 0.1) inset;
border:none;
}
button:hover, .btn:focus {
opacity: 0.75;
}
button:active {
transform: scale(1.2);
}Si cargamos esto en el navegador, nos va a aparecer un botón como este.
Al pulsar el botón, se ejecuta el evento, pero solo si se pulsa el botón.
Ejercicios de JavaScript
-
Haz que el mismo mensaje del
alert()que activa el botón se muestre en el documento html en lugar de con el propioalert().
La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
