Jquery es una herramienta perfecta para lidar con eventos en html
Todas las diferentes aciones de los visitantes a las paginas web se denominan eventos
un evento representa el momento preciso en que sucede algo
ejemplos de ventos
- Moviendo el rato sobre un elemento
- selecionando un button de ratio
- Haciendo clic en un elemento
El término "incendios/despedidos" se usa a menudo con eventos.
ejemplo:
"El evento de pulsación de tecla se activa en el momento en que pulsa una tecla".
...
Lista de eventos comunes en el DOM
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Sintaxis de jQuery para métodos de eventos
La mayoria de los eventos DOM en jquery son equivalentes
ejemplo
Para asgnar el evento clic a todos los parrafos de una paguina, se puede hacer de la seguiente manera:
$("p").click();
El siguiente paso es definir qué debe suceder cuando se activa el evento.
Se puede pasar una function
ejemplo
$("p").click(function(){
// ¡¡aquí va la acción!!
});
algunos metodos mas utilizados
$(documento).listo()
los $(document).ready()nos permite ejecutar una función cuando el el documento está completamente cargado.
este metodo ya fue explicado en 03-sintaxis de jquery
hacer clic()
El método click() adjunta una función de controlador de eventos a un elemento HTML.
Esta función se ejecuta cuando el usuario hace clic en el elemento HTML.
El siguiente ejemplo dice:
Cuando se hace clic en un elemeto p este se esconde
$("p").click(function(){
$(this).hide();
});
Codigo completo del ejemplo
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Si haces clic en mí, desapareceré..</p>
<p>haz clic en mí!</p>
<p>haz clic en mí</p>
</body>
</html>
dblclick()
El método dblclick() adjunta una función de controlador de eventos a un elemento HTML.
La función se ejecuta cuando el usuario hace doble clic en el elemento HTML:
Los ejemplos pueden ser los mismos que anteriormente, pero con el metodo dblclick
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
El método mouseenter() adjunta una función de controlador de eventos a un HTML. elemento.
La función se ejecuta cuando el puntero del mouse ingresa al elemento HTML:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
El ejemplo anterior, ejecuta un alerta cuando pasamos el rato sobre el parrafo
mouseleave()
El método mouseleave() adjunta una función de controlador de eventos a un HTML. elemento.
La función se ejecuta cuando el puntero del mouse deja el elemento HTML:
Codigo de ejemplo
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()
El método mousedown() adjunta una función de controlador de eventos a un HTML. elemento.
La función se ejecuta cuando se presiona el botón izquierdo, central o derecho del mouse, mientras que el el mouse está sobre el elemento HTML:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
El codigo nos lanza un alerta decindo en que button has cargado nel rato
Codigo del ejemplo completo
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup()
El método mouseup() adjunta una función de controlador de eventos a un HTML. elemento.
La función se ejecuta cuando se suelta el botón izquierdo, medio o derecho del ratón, mientras que el el mouse está sobre el elemento HTML:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover()
El método hover() toma dos funciones y es una combinación de las mouseenter() y mouseleave() métodos.
La función se ejecuta cuando el mouse ingresa al elemento HTML, y el segundo la función es ejecutado cuando el mouse deja el elemento HTML:
ejemplo del codigo
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
El método focus() adjunta una función de controlador de eventos a un campo de formulario HTML
La función se ejecuta cuando el campo del formulario recibe el foco:
Ejemplo del codigo
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
blur()
El método blur() adjunta una función de controlador de eventos a un campo de formulario HTML.
La función se ejecuta cuando el campo del formulario pierde el foco:
Codigo del ejemplo
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
on()
El método on() adjunta uno o más controladores de eventos para los elementos seleccionados.
Adjunte un evento de clic a un <p>elemento:
codigo del ejemplo
$("p").on("click", function(){
$(this).hide();
});
Adjunte varios controladores de eventos a un <p>elemento:
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
codigo completo del ejemplo anterior
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias