¡Hola! si estás iniciando en el mundo del desarrollo web seguramente has escuchado el término eventos, hoy te quiero platicar sobre los diferentes tipos de eventos en jQuery y como es que son indispensables para desarrollar sitios interactivos.
Al igual que la mayoría de los lenguajes de programación JavaScript también maneja eventos para controlar diferentes acciones, en esta ocasión te quiero hablar específicamente de los eventos en jQuery (librería basada en JavaScript), recuerda que para usarlos debes definir primero jQuery dentro de tu script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
También te podría interesar ver como mandar información de html a php con jQuery
Contenido
¿Qué son los eventos en jQuery?
Bien para comenzar ¿Qué son los eventos?….
Se entiende como eventos aquellas acciones que dejas programadas para que el navegador interprete después de presentarse alguna acción.
Por ejemplo cuando pulsas alguna tecla, cuando mueves el cursor a alguna parte de la pantalla, cuando das clic sobre algún botón, cualquier cosa que pueda hacer un usuario al estar dentro de un sitio web.
¿Cómo funcionan los eventos?
En el funcionamiento de un evento intervienen tres elementos, los objetos, los eventos y las funciones.
Objeto: Un objeto son todos aquellos elementos HTML sobre los cuales queremos establecer un evento, por ejemplo, un botón, un input, un formulario, un párrafo, etc.
<button id="miboton">Clic para guardar</button>
En la anterior línea diríamos que nuestro objeto es el elemento button con su respectivo identificador miboton.
Evento: Un evento es la acción que queremos detectar y controlar sobre nuestros objetos, jQuery nos provee de muchísimos tipos de eventos, más adelante te comparto algunos de los más usados.
Función: Básicamente son las instrucciones que le daremos a nuestro navegador cuando ocurra el evento que estamos controlando.
$("#miboton").click(function(){
//Aquí pondremos el código de nuestra función
$("#miboton").css("color", "red");
});Podemos observar que sobre nuestro objeto botón estamos estableciendo el evento click y por medio de una función le decimos que cuando se detecte un clic cambie el color a rojo.
Es importante mencionar que la función se puede agregar así como lo hemos hecho anteriormente o también solo podemos hacer referencia a ella pero incluirla en otra parte de nuestro código, algo así: 👇
$("#miboton").click(mifuncion);
function mifuncion(){
//Aquí pondremos el código de nuestra función
$("#miboton").css("color", "red");
}Tipos de eventos en jQuery
Como te he mencionado existen muchos tipos de eventos en jQuery, puedes consultar más de ellos en la documentación de jQuery, a continuación te menciono solo algunos que he usado.
hover: Se usa para detectar cuándo pasamos el cursor sobre algún objeto.
focus: Puedes detectar cuando un usuario enfoca a este elemento.
keydown: Si deseas detectar cuando el usuario deje de presionar alguna tecla lo puedes hacer con este evento.
keypress: Caso contrario al evento anterior, con keypress se detecta cuando el usuario pulsa alguna tecla.
change: Se ocupa para detectar cuando un elemento cambia.
ready: Detecta cuando el DOM está completamente cargado.
Funciones importantes
Te dejo tres funciones que usaras regularmente cuando trabajas con eventos.
unbind: Remueve un evento establecido anteriormente.
preventDefault: Si llamamos esta función la acción predeterminada del evento no se activará.
trigger: Lo puedes usar para ejecutar manualmente un evento sin que el usuario lo lance.
Si este artículo te ayudo no olvides compartirlo en tus redes sociales para que otros colegas sepan de su existencia y los pongan en práctica.
Te envío un fuerte abrazo. 🙂