Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


Administración de eventos con jQuery.


jQuery facilita la administración de eventos de JavaScript y lo más importante nos hace transparente la diferencia en la registración de eventos entre distintos navegadores (IExplorer, FireFox)


En este tutorial ya hemos utilizado el manejador de eventos:



$(documento).ready(nombre de función)

Dijimos que este función que registramos mediante el método ready se ejecuta cuando el DOM del documento está en memoria. Si no utilizamos la librería jQuery hacemos esto a través del evento load.


Otro evento que vimos en conceptos anteriores es el click de un elemento, la sintaxis utilizada:



var x;
x=$("button");
x.click(presionBoton)

Con este pequeño código registramos la función presionBoton para todos los elementos de tipo button del documento.


Con este otro código:



var x;
x=$("#boton1");
x.click(presionBoton)

solo se registra para el elemento con id con valor "boton1".


Por último con este código se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1":



var x;
x=$("#formulario1 button");
x.click(presionBoton)

Para reafirmar estos conceptos confeccionaremos una página que muestre un párrafo, luego una tabla que contenga dos párrafos y por último otra tabla que contenga dos párrafos. Capturaremos el evento click de todos los párrafos del documento y mostraremos un mensaje indicando:'se presionó un párrafo del documento', también capturaremos el evento click del los dos párrafos de la segunda tabla y mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.


pagina1.html



<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<p>Párrafo fuera de la tabla</p>
<table border="1">
<tr>
<td><p>Párrafo dentro de la primer tabla.</p></td><td><p>Párrafo
dentro de la primer tabla.</p></td>
</tr>
</table>
<br>
<table border="1" id="tabla2">
<tr>
<td><p>Párrafo dentro de la segunda tabla.</p></td><td><p>Párrafo
dentro de la segunda tabla.</p></td>
</tr>
</table>
</body>
</html>

funciones.js



var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
var x;
x=$("p");
x.click(presionParrafoDocumento);
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
}

function presionParrafoDocumento()
{
alert('se presionó un párrafo del documento');
}

function presionpresionParrafoSegundaTabla()
{
alert('se presionó un párrafo contenido en la segunda tabla.');
}

El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la función 'presionParrafoDocumento':



x=$("p");
x.click(presionParrafoDocumento);

Luego cuando ejecutemos este documento cada vez que presionemos un párrafo de la página mostrará el mensaje 'se presionó un párrafo del documento'.


También asociamos otra función para el evento click de los párrafos contenidos dentro de la segunda tabla:



x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);

Esto significa que los párrafos contenidos en la segunda tabla tienen asociados dos funciones para el evento click, luego cuando presionemos alguno de los párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo del documento' y 'se presionó un párrafo contenido en la segunda tabla.'



Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría Jquery

  • Medallas
  • 0
    Favoritos
  • 9678
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados