Comenzando Con Jquery

Comenzando con jQuery. Tutorial bsico para comenzar a trabajar con jQuery. Parte 1 de 4.
Publicado el 09/02/2011 por Juan Carlos Rodrguez (6 comentarios) 6
Antes de nada
Esta primera parte del tutorial explica los conceptos ms bsicos de jQuery necesarios para poder entender luego todo lo dems. En este artculo no hay todava ejemplos que puedan ser llevados a la prctica, pero es necesario revisar primero estos conceptos. A partir de la segunda parte del tutorial, estaremos listos para comenzar a hacer scripts realmente complejos con jQuery.
Instalacin
Para poder comenzar a trabajar con jQuery, lo primero que necesitamos es descargar una copia de la librera. Puedes descargar la ltima versin de jQuery desde jquery.com. Una vez tengas la copia de la librera ya tendrs todo lo necesario para comenzar a trabajar.
Lo ms bsico
Lo primero que tienes que hacer para poder utilizar jQuery, es aadir la librera en el archivo HTML en el que quieras utilizarlo. Para ello, aade la siguiente lnea en el HEAD de tu HTML.
<html> <head> <script type="text/javascript" src="jquery.js"></script> </html>
Aqu estamos suponiendo que el archivo jquery.js est en el mismo sitio que el archivo HTML. Dado que todo la mayora de cosas que vamos a hacer con jQuery estn relacionadas con manipular el DOM, lo primero que solemos hacer con jQuery es registrar el evento que nos indica que el DOM est listo. Para ello escribimos,
$(document).ready(function() { // Hacer cosas
});
Esto es similar a la tpica llamada window.onload que se hace en Javascript cuando queremos que algo se ejecute al terminar de cargar la pgina. Aunque quizs sea adelantarme un poco, jQuery est pensado para escribir poco cdigo. De forma que existe un mtodo que hace lo mismo que el cdigo anterior y mucho ms corto,
$(function() { // Hacer cosas });
El cdigo anterior es simplemente una notacin ms corta para expresar lo mismo. Lo que pongamos dentro de la funcin que acabamos de declarar se ejecutar cuando el documento est listo. Jquery est muy orientado a eventos. Lo normal es asociar eventos que se ejecutan cuando el usuario realiza alguna accin. De esta forma podemos separar el comportamiento del contenido, de la misma forma que separamos el contenido de la presentacin con las CSS. Es muy sencillo asociar eventos a elementos con jQuery. Por ejemplo, el siguiente cdigo asocia al evento onclick de cualquier enlace de la pgina el mostrar un alert con el mensaje Hola.
$(document).ready(function() { $("a").click(function() { alert("Hola"); }); });
Si pegramos el cdigo anterior en cualquier HTML con varios enlaces, al pinchar en cualquiera de los enlaces obtendramos un mensaje diciendo Hola. $(a) es un selector de jQuery, que devuelve todos los enlaces de la pgina actual. La funcin click es un mtodo del objeto jQuery. Lo que hace es enlazar a todos los elementos seleccionados por $(a) un evento onclick que ejecutar la funcin pasada entre parntesis. Todo esto que acabamos de hacer es el equivalente a la siguiente lnea de cdigo
<a href="" onclick="alert('Hello world')">Link</a>
Evidentemente, la ventaja de usar jQuery es la separacin entre contenidos (HTML) y los comportamientos (Javascript), esto nos da un cdigo mucho ms limpio.
Selectores
Lo primero que vamos a hacer cuando trabajamos con jQuery es seleccionar elementos sobre los que trabajar. Por ejemplo, si queremos ejecutar una accin cuando un usuario pincha en un botn, lo primero es seleccionar el botn e indicar que accin se ejecutar al pinchar sobre l. O si deseamos que suceda algo cuando el usuario pasa el ratn encima de una imagen, lo primero ser seleccionar dicha imagen. jQuery tiene dos formas para seleccionar elementos de una pgina. Mediante una combinacin de selectores CSS y XPATH que podemos pasar al constructor de jQuery, y mediante varios mtodos del objeto jQuery. Las dos formas pueden usarse por separado o de forma conjunta. En la primera de las aproximaciones puedes utilizar cualquier expresin de seleccin CSS o XPATH. Por ejemplo, si deseas seleccionar los elementos que tienen la clase CSS .rojo, podras hacer lo siguiente
$(.rojo)...
Lo que devolvera todos los elementos que tienen la clase .rojo. Si queremos seleccionar un elemento que tiene el identificador formulario_noticias, escribiramos
$(#formulario_noticias)
No tenemos porque limitarnos a expresiones tan sencillas ni en CSS. Podemos utilizar expresiones ms sofisticadas tanto de CSS como de XPATH. Por ejemplo, el siguiente cdigo
$("#lista li:last")
Devolvera el ltimo elemento li que se encontrara dentro de otro elemento con identificador lista. O este otro,
$("#lista > li")
que devolvera todos los elementos li dentro de un elemento con identificador lista. Podemos utilizar cualquier expresin XPATH o CSS vlida. La lista de selectores actuales puede encontrarse en la documentacin de selectores de jQuery. Adems de los selectores CSS y XPATH, jQuery pone a nuestra disposicin una serie de mtodos que nos permiten seleccionar de forma sencilla elementos de una pgina. Por ejemplo,
$("#lista").find("li")
El mtodo find permite seleccionar todos los elementos que cumplen el criterio pasado como parmetro. El resultado de la lnea de cdigo anterior es devolver todos los
elementos li que hayan dentro del elemento con indentificador lista. Es el mismo efecto que conseguamos antes con CSS. Pero jQuery permite ir mucho ms all y realizar operaciones ms complejas. Imagina que necesitas seleccionar ciertos elementos de un grupo con caractersticas similares, como podra ser seleccionar todos los elementos li de una lista, que no contengan ningn elemento ul dentro. Podramos hacerlo as,
$("li").not(":has(ul)")...
Para filtrar resultados tenemos dos funciones. Una de ellas es not, que seleccionara todos los elementos que no cumplen el criterio, y la otra es filter, que hace justo lo contrario. Otro mtodo bastante potente de seleccionar elementos es utilizando la sintaxis [expresin]. Por ejemplo, si deseas seleccionar todos los enlaces de una pgina que tengan un atributo name, podramos hacer,
$("a[name]")...
O incluso si necesitamos seleccionar enlaces que contengan una cierta direccin de enlace en su href, jQuery nos proporciona un mtodo para hacerlo.
$("a[href*=/imagenes/demo]")....
El operador *= significa que contiene, en lugar de es exactamente igual. De esta forma la expresin anterior devuelve los enlaces que contienen la direccin /imagenes/demo. La direccin no tiene que se exacta, sino simplemente contener dicha direccin. Otras operaciones que suelen ser comunes cuando trabajamos con jQuery es acceder a los elementos contiguos, a los padres e hijos de otros elementos. Por ejemplo, si tenemos este HTML
<ul> <li>texto 1</li> <li id=inicio>texto 2</li> <li>texto 3</li> <li><ul> <li>texto 4</li> </ul></li> </ul>
Por comodidad he puesto el identificador inicio. De esta forma, para acceder al elemento con identificador inicio, hacemos;
$(inicio)...
Si deseamos acceder al elemento con el texto Texto 3 haramos,

$(inicio).next()
Y al de Texto 1 haramos
$(inicio).previous()
Si necesitamos acceder al elemento padre del de identificador inicio, el padre (ul), haramos
$(inicio).parents()
Y si queremos acceder al ul hijo del cuarto li, haramos,

$(inicio).next().next().children()
Que nos dara el elemento ul dentro del cuarto li. Todo esto que hemos visto son slo los aspectos ms bsicos de jQuery. Todava no podemos hacer mucho, pero es necesario ver primero esto porque parte muy importante del trabajo va a ser la seleccin de elementos para trabajar con ellos. En la siguiente parte del tutorial veremos en profundidad el trabajo con eventos. El conocimiento de los selectores junto de los eventos de jQuery es la base necesaria para poder realizar casi cualquier cosa de las que deseemos con jQuery.
Eventos en jQuery. Tutorial bsico para comenzar a trabajar con jQuery. Parte 2 de 4.
Publicado el 15/02/2011 por Juan Carlos Rodrguez (16 comentarios) 5
En esta parte del tutorial vamos a adentrarnos en el trabajo con eventos en jQuery, la idea es tener un conocimiento claro de todo lo que se puede hacer con jQuery antes de comenzar a programar. Los eventos junto con la seleccin de elementos de jQuery es la base para poder hacer luego casi cualquier cosa. Sed pacientes, prestad atencin, y en la parte 3 del tutorial podremos ver en accin todo lo aprendido. Lo ideal sera que leas y entiendas para que sirve cada evento de los mostrados aqu, as cuando empecemos a usarlos en el siguiente artculo sabrs de que va. No te preocupes si todo esto te parece demasiada informacin, trata de entender para que sirve cada evento y usa este artculo como referencia futura de eventos.
Tal como vimos en la anterior parte del tutorial, jQuery nos permite asignar trozos de cdigo que deseamos que se ejecuten a eventos de los elementos de nuestras pginas web. Por ejemplo, el siguiente cdigo hace que se muestre un mensaje cuando el usuario pincha sobre un enlace;
$(document).ready(function(){ $("a").click(function(event){ alert("Este mensaje se muestra cuando el usuario pincha en el enlace"); event.preventDefault(); }); });
La primera lnea es la que establece que el cdigo se ejecute cuando el DOM est listo, as evitamos que el cdigo se ejecute cuando los elementos todava no estn cargados. La segunda lnea se encarga de asociar a todos los enlaces que hayan en la pgina el evento onclick, de forma que cuando el usuario pinche sobre el enlace se ejecute el cdigo que hay en la funcin asociada. Por ltimo, hemos utilizado el event.preventDefault() para evitar que tras mostrarse el mensaje, el navegador se redirija hacia la direccin que pueda tener el enlace asignada, es decir, preventDefault har que tras ejecutarse el cdigo, no pase nada mas. El trabajo bsico con eventos es siempre el mismo;
1. Seleccionamos el elemento en el que deseamos asociar la funcin del evento. 2. Asociamos el evento que queremos controlar a dicho elementos. 3. Escribimos la funcin que se ejecutar cuando se lance en evento.
Pero antes de pasar a ver los eventos ms comunes, vamos a ver el objeto Event y los atributos que tenemos disponibles al trabajar con eventos.
El objeto Event
El objeto Event es pasado a todos los eventos que se lanzan y pone a nuestra disposicin una serie de atributos muy tiles a la hora de trabajar con eventos. Vamos a ver algunos de estos atributos,
event.currentTarget
Devuelte el elemento sobre el que se ha lanzado el evento. Por ejemplo, si el evento es un onclick de un enlace, el currentTarget sera el enlace.
event.data
Devuelve los datos que hayamos podido pasar al evento cuando se asocia con bind (esto lo veremos luego)
event.isDefaultPrevented()
Devuelve si se ha lanzado el mtodo preventDefault() o no.

event.isImmediatePropagationStopped()
Devuelve si el mtodo stopImmediatePropagation() se ha llamado, o no, en este objeto.

event.isPropagationStopped()
Devuelve si el mtodo stopPropagation() ha sido llamado.

event.pageX
Devuelve la posicin relativa del ratn en relacin a la esquina izquierda del documento. Esta propiedad es muy til cuando trabajamos con efectos.
event.pageY
Devuelve la posicin relativa del ratn con respecto a la esquina superior del documento.
event.preventDefault()
Si llamamos a este mtodo dentro de un evento, la accin predeterminada que se ejecutara por este evento nunca ser ejecutada.
event.stopImmediatePropagation()
Previene que se ejecuten otras acciones que pudieran estar asociadas al evento.
event.stopPropagation()
Previene que se ejecute cualquier evento que pudiera estar asociado a los padre del elemento dentro del rbol DOM.
event.target
Es el elemento DOM que inici el evento

event.timeStamp
Nmero en milisegundos desde el 1 de enero de 1970, desde que el evento fue lanzado. Esto podra ayudarnos para realizar pruebas de rendimiento de nuestros scripts.
event.which
Para eventos de teclado y ratn, este atributo indica el botn o la tecla que ha sido pulsada.
Eventos
A continuacin vamos a ir viendo los eventos ms comunes, y junto con cada evento vamos a poner una pequea explicacin y ejemplos de cdigo para hacerlo ms sencillo. Para un listado completo y descripcin de todos los eventos, lo mejor es visitar la documentacin de jQuery.
.bind()
Este mtodo es uno de los principales de jQuery. Bsicamente nos permite asociar funciones a eventos de elementos tanto del DOM como del navegador. Es la forma extendida de hacer lo que hemos hecho antes. Por ejemplo, el siguiente cdigo hace lo mismo que el primer ejemplo de este tutorial,
$(document).ready(function(){ $("a").bind(click, function(event){ alert("Este mensaje se muestra cuando el usuario pincha en el enlace"); event.preventDefault(); }); });
Qu ventaja puede tener usar bind en lugar de la forma abreviada? Pues bsicamente que es mucho ms potente. Usando bind podemos, desde asociar varios eventos simultneamente, hasta pasar parmetros a eventos o incluso inventar nuestros propios eventos que lanzaremos cuando sea necesario.
Asociando mltiples eventos
El siguiente cdigo asocia varios a varios eventos el mismo cdigo,

$('#foo').bind('mouseenter mouseleave', function() { alert('El ratn ha entrado o salido del elemento "foo."'); });
Otra forma de asociar varios eventos simultneamente sera,

$('#foo').bind({ click: function() { // Hacer algo en el click }, mouseenter: function() { // Hacer algo en el mouseenter } });
Esta ltima es una forma bastante comn de trabajar.
Si pasamos el objeto event a la funcin, podremos acceder a todos los atributos de este elemento. Lo que hemos visto en el apartado anterior. El mtodo bind nos permite adems pasar parmetros a la funcin que se va a ejecutar. Por ejemplo,
var message = 'Hola'; $('#hola').bind('click', {msg: message}, function(event) { alert(event.data.msg); }); message = 'Adios'; $('#adios').bind('click', {msg: message}, function(event) { alert(event.data.msg); });
Cuando hagamos click en el elemento #hola aparecer un mensaje Hola. Y cuando pinchemos en el elemento #adios obtendremos un mensaje Adios. Puede parecer que esto no tiene demasiado sentido, pero tiene mucho. Si en lugar de pasar los parmetros para utilizarlos luego en la funcin hubiramos usado directamente la variable message, el resultado sera que en los dos mensajes aparecera el texto Adios. La razn de esto es que cuando se crea el cdigo que se va a ejecutar, no se guarda el estado de las variables actuales, sino que se usa el estado de las variables que hay en el momento exacto de ejecutar el cdigo.
Eventos personalizados
El mtodo bind permite hasta crear tus propios eventos, por ejemplo,
$("#miElemento").bind("miEvento", function(e, miNombre, miValor){ alert(Hola + miNombre); }); $("#boton").click(function () { $("#miElemento").trigger("miEvento", [ "Juan Carlos" ]); });
Esto provocara que cuando un usuario pinche sobre el botn #boton, se lance el evento que he creado exclusivamente para el elemento #miElemento.
.blur()
El evento blur se lanza sobre un elemento que acaba de perder el foco. Normalmente este evento es aplicable a inputs de formularios. Podramos utilizar el evento blur para comprobar que un usuario a introducido correctamente los datos de un campo del formulario. Para hacerlo, el cdigo sera similar a este,
$('#campo1').blur(function() { // Aqu hay que comprobar si el valor introducido en el campo1 es correcto });
.click()
Es el evento que se lanza cuando pinchamos sobre el elemento que hemos asociado el evento. Esto ya lo hemos visto en varios ejemplos, pero pongo otro ejemplo para que quede bien claro,
$('#boton').click(function() { alert('Has pinchado en el botn!'); });
Podramos simular que se ha lanzado el evento haciendo

$(#boton).click()
.dblclick()
Exactamente igual que el evento anterior, pero se lanza cuando hay un doble click sobre el elemento.
.focus()
Este evento se lanza cuando un elemento recibe el foco. Por ejemplo, cuando pinchamos en un input para comenzar a escribir algo, ese input recibir el foco y lanzar el evento.
.focusin()
Evento muy parecido al anterior, pero con una sutil diferencia. Este evento permite saber cuando un elemento o cualquiera de sus hijos gana el foto. Por ejemplo, si tenemos el siguiente HTML,
<p><input type="text" /> <input type="password" /></p>
podemos hacer lo siguiente

$("p").focusin(function() { alert('Focusin lanzado!') });
Esto provocara que se muestre un mensaje siempre que pongamos el focus en cualquiera de los dos inputs que estn dentro del prrafo. La diferencia con focus, es que si asociamos el evento focus, no se mostrara ningn mensaje a ganar el foco cualquiera de los inputs.
.focusout()
Igual que el evento anterior, pero asociado a la prdida del foco.

.hover()
El evento hover se lanza cuando el ratn est encima del elemento sobre el que hemos enlazado el evento. Este evento suele se muy usado, por ejemplo, mostrar un texto cuando el usuario pone el ratn sobre una zona, o mostrar unos botones de navegacin cuando movemos el ratn sobre una fotografa.
.keydown()
Este evento se lanza siempre que el usuario pulsa una tecla, pero se enva slo al elemento que tiene el foco en ese momento. Los elementos que pueden tener el foco varan de un navegador a otro, pero los formularios y los elementos que contienen (inputs, texareas, checkboxs...) siempre pueden tener el foco. De modo que estos elementos suelen ser los perfectos candidatos para gestionar este evento.
.keypress()
Es muy similar al anterior evento, pero con sutiles diferencias. En el caso de que pulsemos una tecla y la mantengamos pulsada, el evento keydown slo se lanza una vez, en cambio keypress se lanzara una vez cada vez que se escriba el carcter. Del mismo modo, si pulsamos modificadores de teclas, como maysculas o control, el evento keydown se lanzara pero el de keypress no.
.keyup()
El evento keyup se lanza cuando el usuario suelta la tecla que estaba pulsando, y al igual que antes se enva al elemento que tiene el foto, por lo que los elementos que nos pueden tener el foco nunca lo recibirn.
.load()
El evento load se lanza tan pronto el elemento al que hemos asociado el evento ha terminado de cargarse por completo. Este evento puede asociarse a cualquier tipo de elemento que tenga una URL, imgenes, iframes, hojas de estilo o javascripts... Hay que tener especial cuidado con las imgenes, porque si la imagen la carga desde la cach en ocasiones no lanza el evento de cargado. Un ejemplo de este evento podra ser;
<img alt="Book" id="book" src="book.png" /> $('#book').load(function() { // Hace algo cuando termina de cargar la imagen por completo });
.mousedown()
El evento mousedown es lanzado cuando pinchamos en cualquier elemento. Es similar al evento onclick, la diferencia est en que este evento se lanza en cuando pinchamos, antes de soltar el botn.
.mousemove()
El evento mousemove es enviado a cualquier elemento cuando el ratn est encima del elemento.
.mouseout()
Es enviado a cualquier elemento cuando el ratn deja de estar encima del elemento.
.mouseover()
Es enviado a cualquier elemento del HTML cuando el ratn entra por primera vez en el. Normalmente podemos usar combinaciones de este evento y de anterior para mostrar u ocultar ciertos elementos mientras movemos el ratn.
.mouseup()
Igual que el evento mousedown, pero se lanza al soltar el botn del ratn sobre el elemento que est gestionando el evento.
.one()
Es igual que bind, pero en este caso el evento slo se ejecuta una vez. Por ejemplo, puede interesarnos que cuando pinchemos un botn se muestre un mensaje, pero que la segunda vez que se pinche ya no se muestre, en ese caso podramos hacer,
$('#boton').one('click', function() { alert('Este mensaje se muestra slo una vez'); });
La primera vez que pinchemos en el botn se mostrar el mensaje y se desvincular el evento del elemento. La segunda vez que se pincha sobre el botn ya no se muestra.
.resize()
resize se lanza cuando cambiamos el tamao de la ventana. Este evento slo se enva al objeto window. Por ejemplo,
$(window).resize(function() { alert('Has cambiado el tamao de la ventana'); });
.scroll()
El evento scroll se enva a los elementos que cambian su scroll ante una accin del usuario. Se aplica a los objetos ventana, frames y elementos con la propiedad overflow CSS puesta en estado scroll. Por ejemplo, podemos tener un elemento como el que sigue
<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
Y establecer el siguiente evento que se activara cuando el usuario mueve el scroll del elemento.
$('#target').scroll(function() { alert('Se ha movido el scroll'); });
.select()
El evento select se lanza cuando el usuario selecciona un texto del elemento sobre el que se gestiona el evento. Este evento slo se aplica a los textarea y a los input de tipo texto.
.submit()
Este evento se lanza cuando un usuario est tratando de enviar un formulario. Este evento slo es vlido para formularios. Dependiendo del navegador es posible enviar el formulario sin necesidad de pinchar en un botn, simplemente pulsando la tecla ENTER. Cuando esto sucede el evento no se lanza, por lo que tenemos que prestar especial atencin a este comportamiento para gestionarlo en su correspondiente evento keypressed.
.toggle()
El evento toggle se utiliza para generar comportamientos de cambio de estado generados al pinchar sobre un elemento. Por ejemplo, puede interesarnos que al pinchar
sobre un elemento se visualice y que al volver a pinchar se oculte. Toggle nos permite hacer esto asociando dos o ms funciones al mismo evento que se van ejecutando de forma secuencial. Por ejemplo, tenemos el siguiente elemento
<div id="target"> Click here </div>
Podemos hacer lo siguiente,

$('#target').toggle(function() { alert('Primer click'); }, function() { alert('Segundo click'); }, function() { alert('tercer click'); });
Si comenzamos a pinchar repetidas veces sobre el elemento #target, generar la siguiente secuencia de alerts... Primer click Segundo click Tercer click Primero click Segundo click . Realmente este comportamiento es muy til ya que las funciones de cambio de estado son muy comunes en comportamiento dentro de una web. Desde mostrar u ocultar elementos, hasta modificar el comportamiento de una tabla cambiando el orden de los elementos al pinchar en el nombre de la columna.
.unbind()
Unbind permite desenlazar un evento del elemento que deseemos. Esto puede ayudarnos a dejar de ejecutar cierto evento en ciertos casos. Por ejemplo, imagina que tienes una galera de fotos, y que slo cuando las imgenes estn es tamao pequeo se pueda pinchar sobre ellas, lo que podramos hacer es enlazar un evento para el caso de que cuando las imgenes se ven pequeas se pueda pinchar sobre ellas y que cuando las imgenes se vean grandes quitar ese evento. En el siguiente ejemplo de cdigo se ve mejor,
var funcion = function() { alert('Mensaje cuando pinchas'); };
Si queremos enlazar la funcin anterior a un evento onclick de un elemento, podemos hacer,
$('#foo').bind('click', funcion);
Lo que provocara que cuando se pinche sobre el elemento #foo, se muestre el alert. Y si ahora quisiramos dejar de ejecutar el evento anterior al seguir pinchando podemos hacer,
$('#foo').unbind('click', funcion);
.unload()
El evento unload se lanza cuando un usuario navega fuera de la pgina web o se dirige hacia otra parte de la web. Se ejecuta siempre, incluso si el usuario cierra el navegador.
Conclusin
Y ahora si, llegados a este punto ya estamos en disposicin de comenzar a programar con jQuery. Los conocimientos de seleccin de elementos y de eventos de jQuery son la base para poder realizar luego cualquier cosa. En la siguiente parte del tutorial veremos el trabajo con CSS y los efectos de jQuery. A la vez que vamos viendo toda la parte terica iremos programando nuestro propio lightBox para poner en prctica los conocimientos.

Comenzando Con Jquery

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Comenzando Con Jquery

Încărcat de

Drepturi de autor:

Formate disponibile

Comenzando con jQuery. Tutorial bsico para comenzar a trabajar con jQuery. Parte 1 de 4.

Publicado el 09/02/2011 por Juan Carlos Rodrguez (6 comentarios) 6

Si deseamos acceder al elemento con el texto Texto 3 haramos,

Y si queremos acceder al ul hijo del cuarto li, haramos,

Devuelve si se ha lanzado el mtodo preventDefault() o no.

Devuelve si el mtodo stopImmediatePropagation() se ha llamado, o no, en este objeto.

Devuelve si el mtodo stopPropagation() ha sido llamado.

Es el elemento DOM que inici el evento

El siguiente cdigo asocia varios a varios eventos el mismo cdigo,

Otra forma de asociar varios eventos simultneamente sera,

Esta ltima es una forma bastante comn de trabajar.

Podramos simular que se ha lanzado el evento haciendo

podemos hacer lo siguiente

Igual que el evento anterior, pero asociado a la prdida del foco.

Podemos hacer lo siguiente,

Si queremos enlazar la funcin anterior a un evento onclick de un elemento, podemos hacer,

S-ar putea să vă placă și