Web.JS.Jquery.Eventos.

Ismael Royano Gómez
Enredando con la WEB.
2 min readMar 19, 2018

Los eventos son las diferentes acciones que puede hacer una persona mientras que navega por una página web; hacer click, doble click, botón derecho del ratón, scrool, mover el ratón…etc. Vamos a ver algunos eventos para como se hace con jquery:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});

});
</script>
</head>
<body>
<p>Si haces doble click en cualquier parrafo lo borro.</p>
<p>Haz doble click aqui verás como desaparezo</p>
<p>Haz doble click aquí también verás como desaparezco</p>
</body>
</html>

Las funciones también que estamos haciendo con jquery se llaman funciones anónimas, es decir, son funciones que se ejecutan en ese momento y por tanto no tiene nombre, pero podemos hacerlo de otra forma si así lo vemos más claro:

<script>
$(document).ready(function(){
$("p").dblclick(ocultar)
});

function ocultar(){
$(this).hide();
}

</script>

De esta forma lo que hacemos es llamar a una función “ocultar” en vez de crear una sin nombre. En la práctica es lo mismo pero a nivel de ejecución quizás es más rápido con la función anónima, ya que cuando la ejecuta se borra de memoria, en cambio la función con nombre debe reservarse en memoria y ocupa más recursos.

Existen muchos más eventos:

click() Al hacer click.
dblclick() Al hacer doble click.
blur() Al perder el enfoque.
focusin() Al obtener el enfoque.
focusout() Al perder el enfoque.
focus() Al obtener el enfoque.
hover() Al poner encima y quitar el enfoque de un link.
keydown() Al presionar una tecla.
keypress() Al presionar una tecla.
keyup() Al soltar una tecla.
mousedown()Al hacer presionar en el botón del ratón.
mouseup() Al soltar el el botón del ratón.
mouseenter() Al poner el ratón encima.
mouseleave() Al alejarse.
mousemove() Al mover el ratón.
mouseout() Al poner el ratón encima.
mouseover() Al alejarse.
change() Este evento se ejecuta cuando modificas un campo y se pierde el enfoque.

Hay una gran lista de eventos en esta página por si a alguien le pica la curiosidad.

Continúa por Jquery Elementos.

--

--

Ismael Royano Gómez
Enredando con la WEB.

Técnico Informático curioso, lector activo de las nuevas tecnologías, amante de las series de televisión y usuario del respetable mundo del enredo.