Tenemos la capacidad crear paginas web dinamicas utilizando eventos. Los eventos son acciones que pueden ser detectadas por su sitio web. Los siguientes son ejemplos de eventos:
* Un clic del raton
* Una pagina web cargada
* Poniendo el raton sobre un elemento
* Envio de un formulario HTML
* Una combinacion de teclas del teclado
* etc
Cuando se activan estos eventos a continuacion, puede utilizar una funcion personalizada para hacer casi todo lo que quieras con el evento. Estas funciones personalizadas llaman al manejador de eventos.
Uniendo los controladores de eventos
Usando el modelo de eventos de jQuery, podemos establecer los controlares de eventos de elementos DOM con el metodo bind() de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").bind('click',function( event ){
alert('Hola tu!');
});
});
</script>
<style type="text/css">
.div{
margin:10px;
padding: 12px;
border:2px solid #666;
width: 60px;
}
</style>
</head>
<body>
<p>Da clic al cuadrado de abajo:</p>
<span id="result"></span>
<div class="div" style="background-color:yellow;">UNO</div>
<div class="div" style="background-color:green;">DOS</div>
<div class="div" style="background-color:red;">TRES</div>
</body>
</html>
Este codigo hara que el elemento div responda al evento click, cuando el usuario hace click en el interior de ese div a partir de entonces, se mostrará una alerta.
La sintaxis completa del comando bind() es:
selector.bind(eventType[,eventData],handler)A continuacion se presenta la descripcion de los parametros:
* eventType - Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit.
* eventData - Este es un parametro opcional es un mapa de datos que se pasará al controlador de eventos.
* handler - Una funcion para ejecutar cada vez que el evento se dispare.
Eliminacion de controlares de eventos
Por lo general, una vez que se establece un controlador de eventos, permanece en efecto para el resto de la vida de la pagina. Puede haber una necesidad cuando se desee eliminar el controlador de eventos de la pagina.
jQuery proporciona el comando unbind() para eliminar un controlador de eventos. La sintaxis de unbind() es la siguiente:
selector.unbind(eventType,handler)
selector.unbind(eventType)
La siguiente es la descripcion de los parametros:
* eventType - Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit.
* handler - Si se proporciona, identifica un listener especifico que es para ser eliminado.
Ejemplo: http://api.jquery.com/unbind/
Tipos de eventos
Los siguientes eventos multiplataforma son recomendados que se pueden hacer bind() usando jQuery:
+----------------+-----------------------------------------------------------------------+ | Tipo de evento | Descripcion | +----------------+-----------------------------------------------------------------------+ | blur | se produce cuando el elemento pierde el foco. | +----------------+-----------------------------------------------------------------------+ | change | se produce cuando el elemento cambia. | +----------------+-----------------------------------------------------------------------+ | click | se produce cuando hace un click con el raton. | +----------------+-----------------------------------------------------------------------+ | dblclick | se produce cuando hace doble click con el raton. | +----------------+-----------------------------------------------------------------------+ | error | se produce cuando hay un error en la carga y descarga,etc. | +----------------+-----------------------------------------------------------------------+ | focus | se produce cuando el elemento recibe el foco. | +----------------+-----------------------------------------------------------------------+ | keydown | se produce cuando se presiona la tecla. | +----------------+-----------------------------------------------------------------------+ | keypress | se produce cuando se pulsa la tecla y luego se libera. | +----------------+-----------------------------------------------------------------------+ | keyup | se produce cuando se suelta la tecla | +----------------+-----------------------------------------------------------------------+ | load | se produce cuando se carga el documento | +----------------+-----------------------------------------------------------------------+ | mousedown | se produce cuando se presiona el boton del raton. | +----------------+-----------------------------------------------------------------------+ | mouseenter | se produce cuando el raton entra en una region de un elemento. | +----------------+-----------------------------------------------------------------------+ | mouseleave | se produce cuando el raton sale de una region de un elemento. | +----------------+-----------------------------------------------------------------------+ | mousemove | se produce cuando el puntero del raton se mueve. | +----------------+-----------------------------------------------------------------------+ | mouseout | se produce cuando el puntero del raton se mueve fuera de un elemento. | +----------------+-----------------------------------------------------------------------+ | mouseover | se produce cuando el puntero del raton se mueve sobre un elemento. | +----------------+-----------------------------------------------------------------------+ | mouseup | se produce cuando se suelta el boton del raton. | +----------------+-----------------------------------------------------------------------+ | resize | se produce cuando se cambia el tamaño de la ventana. | +----------------+-----------------------------------------------------------------------+ | scroll | se produce cuando se desplaza la ventana. | +----------------+-----------------------------------------------------------------------+ | select | se produce cuando se selecciona un texto | +----------------+-----------------------------------------------------------------------+ | submit | se produce cuando el formulario es enviado | +----------------+-----------------------------------------------------------------------+ | unload | | +----------------+-----------------------------------------------------------------------+
El objeto de event
La funcion de devolucion de llamada toma un unico parametro, cuando el controlador se llama el objeto de evento Javascript sera pasado a traves de él. El objeto de evento (event) es a menudo innecesario y el parametro se omite, como contexto suficiente suele estar disponible cuando el controlador esta obligado a saber exactamente lo que hay que hacer cuando se activa el controlador (handler), sin embargo hay ciertos atributos que usted necesita para acceder.
Atributos del objeto event
Las siguientes propiedades/atributos de event estan disponibles para su acceso seguro de forma independiente de la plataforma:
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Propiedad | Descripcion | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | altKey | Establece en true si se pulsa la tecla ALT cuando se activa el evento, false en caso contrario. La tecla ALT | | | se marca como opcion en la mayoria de los teclados MAC. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | ctrlKey | Se establece en true si se pulsa la tecla CTRL cuando se activa el evento, falso en caso contrario. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | data | El valor, en su caso, pasa como segundo parametro el comando bind() cuando se establece el manejador. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | keyCode | Para eventos keyup y keydown, esto devuelve la tecla que se presiono. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | metaKey | Se establece en true si se pulsa la tecla META cuando se activa el evento, false en caso contrario. La tecla META | | | es la tecla CTRL en PC y tecla COMMAND en MAC. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | pageX | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pagina. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | pageY | Para eventos de raton, especifica la coordenada vertical del evento relativo desde le origen de la pagina. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | relatedTarget | Para algunos eventos de raton, identifica el elemento hacia la izquierda o dentro cuando se activa el elemento. Ejemplo: https://api.jquery.com/event.relatedTarget/ | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | screenX | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pantalla. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | screenY | Para eventos de raton, especifica la coordenada vertical del evento relativo desde el origen de la pantalla. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | shiftKey | Se establece en true si se pulsa la tecla SHIFT cuando se activa el evento, false en caso contrario. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | target | Identifica el elemento para el que se activa el evento. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | timeStamp | El tiempo marcado (en milisegundos) cuando se creo el evento. | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | type | Para todos los eventos, especifica el tipo de evento que se activa (por ejemplo hacer clic). | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | which | Para eventos de teclado, especifica el codigo numerico de la tecla que causo el evento, y para los eventos de raton, especifica que se presiona el boton | | | (1 a la izquierda, 2 en el medio, 3 a la derecha). | +---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").bind('click',function( event ){
alert('Tipo de evento es: ' + event.type);
alert('PageX: ' + event.pageX);
alert('PageY: ' + event.pageY);
alert('Target: ' + event.target.innerHTML);
});
});
</script>
<style type="text/css">
.div{
margin:10px;
padding: 12px;
border:2px solid #666;
width: 60px;
}
</style>
</head>
<body>
<p>Da clic al cuadrado de abajo:</p>
<span id="result"></span>
<div class="div" style="background-color:yellow;">UNO</div>
<div class="div" style="background-color:green;">DOS</div>
<div class="div" style="background-color:red;">TRES</div>
</body>
</html>
Los metodos del objeto event
La siguiente es una lista de metodos que pueden ser llamados en un objeto event.
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | Metodo | Descripcion | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | preventDefault() | Evita que el navegador ejecute una accion predeterminada | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | isDefaultPrevented() | Devuelve si event.preventDefault() alguna vez fue llamado en este objeto de event. | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | stopPropagation() | Detiene el burbujeo de un evento para elementos primarios, evitando cualquier controlador padre ser notificado del evento. | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | isPropagationStopped() | Devuelve si event.stopPropagation() alguna vez fue llamado en este objeto event. | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | stopImmediatePropagation() | Detiene el resto de los controladores de ser ejecutados. | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+ | isImmediatePropagationStopped() | Devuelve si event.stopImmediatePropagation() alguna vez fue llamado en este objeto event. | +---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
Metodos de manipulacion de eventos
La siguiente tabla enumera metodos relacionados con eventos importantes:
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | Metodo | Descripcion | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | bind(type,[data]),fn | Enlaza un controlador de uno o mas eventos (como hacer clic) para cada elemento coincidente. | | | Tambien se pueden enlazar eventos personalizados. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | off(events[,selector][,handler(eventObject)]) | Esto hace lo contrario de live, elimina un evento atado en live. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | hover(over,out) | Simula que se asoma por ejemplo moviendo el mouse fuera o dentro del objeto. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | on(events[,selector][,data],handler) | Enlaza un controlador a un evento (como clic) para los actuales - y futuros - elementos coincidentes. | | | Tambien se pueden enlazar elementos personalizados. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | one(type[,data],fn) | Enlaza un controlador de uno o mas eventos que se ejecutaran una vez por cada elemento coincidente. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | ready(fn) | Se une una funcion a ejecutar cuando el DOM este listo para ser atravesado y manipulado. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | trigger(event,[data]) | Activar un evento en cada elemento coincidente. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | triggerHandler(event,[data]) | Dispara todos los controladores de eventos ligados a un elemento. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+ | unbind([type],[fn]) | Esto hace lo contrario de bind, elimina eventos enlazados de cada uno de los elementos coincidentes. | +-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
Eventos metodos Helper
jQuery tambien proporciona un conjunto de funciones auxiliares para eventos que se pueden utilizar ya sea para activar (trigger) un evento u obligar (bind) cualquier tipo de evento mencionado anteriormente.
Metodos de activacion
A continuacion se presenta un ejemplo que desencadena el evento blur en todos los parrafos.
$("p").blur();Binding metodos
A continuacion se presenta un ejemplo donde se enlaza (bind) un evento cuando hacen click en todo el div.
$("div").click(function(){Aqui esta una lista completa de todos los metodos de ayuda de apoyo proporcionados por jQuery:
// hacer algo aqui
});
+----------------+----------------------------------------------------------------------------+ | Metodo | Descripcion | +----------------+----------------------------------------------------------------------------+ | blur() | Dispara un evento de desenfoque a cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | blur(fn) | Enlaza una funcion al evento desenfoque a cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | change() | Dispara el evento de cambio de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | change(fn) | Enlaza una funcion para el evento de cambio de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | click() | Dispara el evento de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | click(fn) | Enlaza una funcion para el evento click de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | dblclick() | Dispara el evento dblclick de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | dblclick(fn) | Enlaza una funcion para el evento dblclick de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | error() | Dispara el evento de error de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | error(fn) | Enlaza una funcion para el evento error de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | focus() | Dispara el evento enfoque de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | focus(fn) | Enlaza una funcion para el evento focus de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keydown() | Dispara el evento keydown de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keydown(fn) | Enlaza una funcion al evento keydown de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keypress() | Dispara el evento keypress de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keypress(fn) | Enlaza una funcion al evento keypress de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keyup() | Dispara el evento keyup de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | keyup(fn) | Enlaza una funcion al evento keyup de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | load(fn) | Enlaza una funcion para el evento load de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mousedown(fn) | Enlaza una funcion para el evento mousdown de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mouseenter(fn) | Enlaza una funcion para el evento mouseenter de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mouseleave(fn) | Enlaza una funcion para el evento mouseleave de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mousemove(fn) | Enlaza una funcion para el evento mousemove de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mouseout(fn) | Enlaza una funcion para el evento mouseout de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mouseover(fn) | Enlaza una funcion para el evento mouseover de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | mouseup(fn) | Enlaza una funcion para el evento mouseup de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | resize(fn) | Enlaza una funcion para el evento resize de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | scroll(fn) | Enlaza una funcion para el evento scroll de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | select() | Dispara el evento select de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | select(fn) | Enlaza una funcion para el evento select de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | submit() | Dispara el evento submit de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | submit(fn) | Enlaza una funcion para el evento submit de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+ | unload(fn) | Enlaza una funcion para el evento unload de cada elemento coincidente. | +----------------+----------------------------------------------------------------------------+
Fuente: http://www.tutorialspoint.com
No hay comentarios:
Publicar un comentario