jQuery: activa la misma función desde múltiples eventos
- jQuery Multiple Events: seguimiento de la interacción del usuario en formulario HTML
- jQuery Eventos múltiples: cambiar el color de fondo
Este artículo le enseña cómo activar la misma función desde múltiples eventos en jQuery. Mostraremos dos ejemplos de cómo hacer esto usando jQuery .on() API.
El primer ejemplo rastrea los movimientos del usuario en las entradas de formulario HTML. Mientras que el segundo cambiará el color de fondo de un elemento HTML.
jQuery Multiple Events: seguimiento de la interacción del usuario en formulario HTML
En este ejemplo, configuramos una función anónima que rastrea las interacciones de dos usuarios. El primero es onblur y el segundo es onmouseleave.
Tendremos que escribir esto en dos lugares en un día normal, pero podemos hacerlo simultáneamente con la API .on(). Primero, elegimos un elemento para los múltiples eventos.
Luego usamos .on() para monitorear los eventos onblur y onmouseleave.
Hacer esto puede rastrear cuando un usuario cambia entre entradas de formulario. Si lo desea, puede implementar la validación de formularios en el proceso.
A continuación, tenemos un formulario HTML con dos entradas HTML. Luego tenemos la API jQuery .on() que escucha los eventos onblur y onmouseleave.
Durante este proceso, registramos mensajes en la consola del navegador web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Basic Form Validation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
form { border: 2px solid #1560bd; font-size: 2em; padding: 1.2em; }
</style>
</head>
<body>
<main>
<form id="html_form">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
<input type="submit" name="submit" value="Submit form">
</form>
</main>
<script>
$("document").ready(function() {
// Use the "on" API to attach anonymous functions
// to the focus, blur, and mouseleave events. Although
// we only show console.log messages; you can implement
// form validation routines.
$("#first_name, #last_name").on({
focus: function() {
$(this).css("outline", "3px solid #1a1a1a");
},
blur: function() {
$(this).removeAttr("style");
console.log("Blur left");
},
mouseleave: function() {
$(this).removeAttr("style");
console.log("Mouse left");
},
})
});
// Prevent form submission
$("#html_form").submit(function(e) {
return false;
})
</script>
</body>
</html>
Producción:
jQuery Eventos múltiples: cambiar el color de fondo
Puede cambiar el color de fondo de un elemento en función de los movimientos del mouse. Puede usar onmouseenter y onmouseleave en Vanilla JavaScript.
Pero con jQuery .on() API, puede hacerlo todo en una sola línea, pero puede dividirlo para una mejor legibilidad. A continuación, cuando mueve el mouse sobre el elemento principal, su color de fondo cambia.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Change page background color</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
main { font-size: 2em; padding: 1em; border: 5px solid #1a1a1a; display: block;}
</style>
</head>
<body>
<main id="main">
<p>This is a big text. Move your mouse and see what happens.</p>
</main>
<script type="text/javascript">
$("document").ready(function() {
// Change the background color of the main
// element when the user moves their mouse over
// it.
$("#main").on({
mouseenter: function() {
$(this).css("background", "#aaa");
},
mouseleave: function() {
$(this).css("background", "#fafafa");
},
})
});
</script>
</body>
</html>
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn