Temas > Programacion > Java script - Java > Administracion de eventos con jQuery
Julio

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:
<?php //esto no va
   var x;
  x=$("button");
  x.click(presionBoton)
?>//esto no va
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:
<?php //esto no va
  var x;
  x=$("#boton1");
  x.click(presionBoton)
?>//esto no va
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":
<?php //esto no va
  var x;
  x=$("#formulario1 button");
  x.click(presionBoton)
?>//esto no va
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
<?php //esto no va
 <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>
?>//esto no va
funciones.js
<?php //esto no va
 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.`);
 }
?>//esto no va
El siguiente código asocia a cada elemento de tipo "p" 
(párrafo del documento) la función `presionParrafoDocumento`:
<?php //esto no va
   x=$("p");
   x.click(presionParrafoDocumento);
?>//esto no va
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:
<?php //esto no va
   x=$("#tabla2 p");
   x.click(presionpresionParrafoSegundaTabla);
?>//esto no va
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.`













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar