JAVASCRIPT JQUERT - MANEJAR EVENTOS

En esta sesión mostramos cómo definir manejadores de eventos comunes para elementos de una página web con JQuery.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

El manejador "on", o atajos más convenientes. Los más comunes:
focus / blur
change
click
keyup / keydown

En cada función de manejo de eventos, podemos tener acceso a información acerca del evento ocurrido, si lo necesitamos

Referencias:
http://learn.jquery.com/events/
https://developer.mozilla.org/en-US/docs/Web/Events
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplos de manejadores de eventos con JQuery</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Probar manejo de eventos</h1>
<p>Active la consola web y pruebe escribiendo, seleccionando y pulsando sobre los elementos</p>
<form>
<input type="text" name="texto" id="texto" placeholder="Escriba para probar...">
<select name="lista" id="lista">
<option>Ninguno</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
</select>
<a href="http://www.google.com">Ir a www.google.com</a>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
/* Utilizamos los "atajos" para manejadores de eventos */
$('input:text')
.focus(function(){
console.log( "El campo de texto aceptó el foco" );
})
.blur(function(){
console.log( "El campo de texto perdió el foco" );
})
.keydown(function( e ){
console.log( "Hemos recibido keydown con la tecla " + e.which );
})
.keyup(function( e ){
console.log( "Hemos recibido keyup con la tecla " + e.which );
})
.change(function( e ){
console.log( "Hubo un cambio en el campo de texto" );
});
/* También podemos utilizar el método genérico "on" para definir manejadores */
$('select').on( 'change', function(){
var valorSeleccionado = $( this ).val();
console.log( "Cambió la selección. El valor seleccionado es " + valorSeleccionado );
});
$('a').click(function(e){
console.log( "Hemos recibido un clic en el enlace" );
var destino = $(this).attr('href');
if ( confirm( "¿Está seguro de que desea navegar hacia '"+ destino +"'?" ) ) {
alert('Adiós!!!');
}
else {
// evitar la acción predeterminada (navegar hacia el enlace)
e.preventDefault();
console.log( "Cancelamos la navegación del enlace" );
alert('Enviaremos el foco hacia el campo de texto');
// desencadenamos manualmente el evento focus
$('#texto').focus();
}
});
/* Pueden definirse varios manejadores para los eventos sobre elementos */
$('select').on( 'change', function(){
console.log( 'Otro manejador apilado sobre la lista' );
});
/* O incluso desactivar los manejadores ("off") */
$( "select" ).off( "change" );
});
</script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.