Programar en javascript puede ser más fácil sabiendo utilizar jQuery
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 188
Visitas el mes pasado: 239
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
Recordemos que los eventos en javascript son aquellas instrucciones que permiten variar el estado de la página mediante una acción. Esta acción puede venir por parte del usuario o llevarse a cabo en un cierto momento por estar así indicada. En javascript los eventos son instrucciones que podemos poner tanto en el lenguaje HTML (como atributos) como en el código javascript.
Los eventos, en javascript, se escriben todos con el prefijo "on", (onclick, onblur, onmouseout, onkeypress, etc). Cada evento indica algo que ocurre en algun elemento de la página (o en todo el documento). El evento registra un cambio en la página, y pone en marcha un mecanismo para introducir un código.
JQuery tiene también sus métodos para detectar los eventos. Estos se incluyen siempre en el lenguaje javascript. La mayoría de estos métodos se escriben igual que en javascript, pero sin el prefijo "on", por ejemplo onclick se convierte en .click()
Por supuesto podemos seguir utilizando los atributos javascript en el html, y mandar las acciones a ejecutar a una función:
<p id="p1" onclick="cambiar()">Pulsa para cambiar</p>
El método es el mismo que el utilizado sin jQuery. La diferencia es que ahora, dentro de la función del evento (function cambiar()..) podemos utilizar código jQuery.
Sin embargo podemos crear el evento desde el mismo código javascript-jQuery, utilizando las funciones de evento, por ejemplo, si tenemos un elemento html como el siguiente:
<p id="p1">Pulsa para cambiar</p>
En el código con jQuery (dentro del "document ready"), escribimos lo siguiente:
$("#p1").click(cambiar);
Esto crea un evento "onclick" asociado al elemento html, el código asociado al evento (la funcion "cambiar", debemos escribirlo dentro del paréntesis (Escribimos el nombre de la funcion sin parentesis, "cambiar", ya que si escribieramos "cambiar()" -con paréntesis- estaríamos llamando al valor de retorno de la función). Esto nos obliga también a crear una función "cambiar()" aparte, en la que escribir el código de lo que sucede al desencadenarse el evento.
Esta solución, aunque válida, no es la más adecuada, ya que obliga a crear otra función, con lo que se complica el código. La solución más adecuada (y la más utilizada), es crear una función anónima dentro del paréntesis, en la cual indicamos el código asociado al evento:
$("#p1").click(function(){
//Aquí va el código asociado al evento
});
Hemos visto ejemplos de esto en páginas anteriores con el método .click(), por lo que creo que no tiene mayor dificultad usarlo con otros eventos.
Aunque los eventos que se usan con jQuery son en su mayoría los mismos que los usados en javascript, puede haber algunas diferencias. Aquí vamos a poner los eventos más usados. Vamos a poner un ejemplo de cada uno de ellos. Podemos ver su funcionamiento en el recuadro de la derecha.
.click() : pulsar una vez el ratón sobre un elemento:
$("#click").click(function() {
alert("click simple");
});
.dblclick() : pulsar el ratón dos veces seguidas sobre un elemento:
$("#dblclick").dblclick(function() {
alert("doble click");
});
click aquí.
doble click (dblclick) aquí.
Aquí mouseenter y mouseleave
Aquí hover
mousedown, mouseup: sin pulsar (up)
.mouseenter() : El ratón se sitúa encima de un elemento:
$("#mouse1").mouseenter(function() {
$(this).css("color","red");
});
.mouseleave() : El ratón, que estaba situado encima de un elemento, sale de él:
$("#mouse1").mouseleave(function() {
$(this).css("color","blue");
});
.hover() : Este evento es una combinación de los dos anteriores, detecta la posición del raton, y se produce tanto cuando éste se coloca encima del elemento, como cuando sale de él. Admite dos funciones, que las escribiremos separadas por una coma, La primera de ellas se produce cuando el ratón entra, y la segunda cuando sale:
$("#hover").hover(function() {
$(this).css("color","red");
},
function() {
$(this).css("color","blue");
});
.mousedown() : Momento en que presiona el botón, independientemente de si se suelta o no, vale tanto para el botón izquierdo como para el derecho.
$("#pulsaRaton").mousedown(function() {
$(this).html("<b>mousedown</b>, mouseup: pulsado")
});
.mouseup() : soltar un botón del ratón después de hacer click. El evento se produce sólo en el momento de soltar el botón.
$("#pulsaRaton").mouseup(function() {
$(this).html("mousedown, <b>mouseup</b>: sin pulsar")
});
.mousemove() : El evento se produce al mover el ratón sobre un elemento.
n1=0;
$("#capa2").mousemove(function(){
n1++;
$("#mousemove").html("mousemove: "+n1+" movimientos");
});
.mouseover() : El evento se produce al situarse el ratón sobre un elemento. El evento puede producirse varias veces mientras está encima del elemento.
n2=0;
$("#capa2").mouseover(function(){
n2++;
$("#mouseover").html("mouseover: "+n2+" veces");
});
mousemove: 0 movimientos
mouseover: 0 veces
toggle: click para cambiar color
Tecla sin pulsar
.toggle() : El evento se produce al hacer click con el ratón. Tiene la particularidad de que admite varias funciones, que se van alternando en su ejecución cuando el usuario realiza clicks.
$("#toggle").toggle(function() {
$(this).css("color","red");
},
function() {
$(this).css("color","blue");
},
function() {
$(this).css("color","green");
});
.keydown() : El evento se produce en el momento que se presiona una tecla, independientemente de si se libera la presión o se mantiene. Se produce una única vez en el momento exacto de la presión.
.keypress() : Se produce al tener pulsada una tecla, Si se mantiene pulsada, el evento se produce varias veces, de la misma manera que se escriben varios caracteres al mantenerla pulsada. Se corresponde con el hecho de tener la tecla pulsada.
.keyup() : El evento se produce en el momento de dejar de presionar una tecla que teníamos pulsada.
Los eventos de teclado se suelen aplicar al documento (document), y no a un elemento concreto. veamos el código del ejemplo del cuadro de la derecha:
$(document).keydown(function(){
$("#teclado").html("tecla pulsada");
});
$(document).keyup(function(){
$("#teclado").html("tecla sin pulsar");
});
Son los eventos que controlan el "foco" o elemento seleccionado. Podemos llevar el foco a un elemento mediante el ratón (haciendole click), o mediante el teclado (tabulador o inter). En una página los elementos que admiten tener el foco suelen ser los elementos de formulario.
.focusin() : El elemento adquiere el foco de la aplicación.
.focusout() : El elemento pierde el foco de la aplicación.
.focus() : El elemento tiene el foco de la aplicación. igual que el evento "onfocus" de javascript.
Seguimos con los eventos en la proxima página. Veremos el objeto "event" que proporciona información del evento.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com