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
 123456
78910111213
14151617 181920
21222324252627
282930    

Viernes 18 de Abril 2025
Semana 16



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(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