DHTML

DHTML (HTML dinmico)
DHTML tiene por objetivo aumentar la funcionalidad de un sitio web. Se puede utilizar para crear animaciones, menes desplegables, mostrar y ocultar partes de una pgina luego que la pgina fue cargada completamente, crear un entramado de capas que con slo el HTML y CSS sera imposible alcanzar. Si bien la funcionalidad de DHTML se puede duplicar con otras herramientas como los Applet de Java o Flash, el DHTML ofrece la ventaja de que no requiere ningn tipo de plug-in para poder utilizarlo. DHTML ofrece a los creadores de pginas web la posibilidad de modificar, cambiar la apariencia, ocultar, mostrar y animar el contenido dinmicamente. Con DHTML podemos, luego de cargada la pgina en el navegador, acceder a cada una de las marcas HTML modificar sus atributos, ocultarlas, volverlas a mostrar y acceder al estilo definido para dicha marca. Debe quedar bien en claro que DHTML no es un lenguaje nuevo sino la combinacin de HTML, CSS y JavaScript. El DHTML es otro de los escalones que debemos dominar para poder introducirnos en el mundo de AJAX.
Importancia del DOM (Document Object Model)

Para poder aplicar los conceptos de DHTML debemos conocer a la perfeccin el DOM (Document Object Model - Modelo Objeto Documento) El DOM es otra forma para representar una pgina web. Con el DOM, todos los elementos HTML se insertan en un rbol cuyos nodos son las marcas HTML y las hojas, los valores propiamente dichos de las marcas. Por medio de JavaScript podemos acceder y modificar este rbol de marcas y hacer que la pgina vare luego que ya se haya mostrado en el navegador. De aqu el nombre de esta tecnologa DHTML es decir Dynamic Hyper Text Markup Language. Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algn evento. Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la pgina y dinmicamente agregar, modificar o borrar propiedades. Todos esto sin tener que recargar la pgina del servidor, es decir todo se hace en el cliente (navegador) mediante JavaScript.
Accediendo a una marca HTML a travs del DOM (getElementById)

La primera funcin que nos provee el DOM a travs del objeto document es:
document.getElementById("nombre del Id de la marca HTML")

Nos retorna una referencia a la marca en s misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. <html> <head> <title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css">

</head> <body> <h1 id="titulo">Este es un ttulo dinmico</h1> <input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamao de Fuente" onClick="cambiarTamanoFuente()"> </body> </html>
Por otro lado definimos el archivo estilos.css: #titulo { text-align:center; } #boton1,#boton2 { text-align:center; width:200px; } y el archivo funciones.js:
function cambiarColor() {
para recuperar una referencia a la marca h1 debemos indicar el siguiente cdigo:

var tit=document.getElementById('titulo'); tit.style.color='#ff0000'; en la varible tit tenemos una referencia a la marca h1 de la pgina. } function cambiarTamanoFuente() { var tit=document.getElementById('titulo'); tit.style.fontSize=60; }
Accediendo a los nodos hijos de una marca HTML(childNodes)(solo Internet Explorer)

Cada nodo tiene un solo nodo padre, pero puede tener muchos hijos.
En este ejemplo el nodo body tiene 4 hijos, la marca h1 tiene 1 hijo, lo mismo cada marca li tienen un hijo. Los nodos que no tienen descendientes son los nodos hoja. El DOM provee a cada nodo de un vector que almacena la referencia a cada nodo hijo, la propiedad se llama: childNodes Este vector almacena una referencia a cada nodo hijo. <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body>
Es importante notar que slo definimos la propiedad id para la marca div, ya que teniendo la referencia de ste podemos acceder a los tres hijos (los tres prrafos).
<div id="bloque"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="Cambiar colores" onClick="cambiarColores()"> </body> </html> El archivo javascript funciones.js es el siguiente: function cambiarColores() { var lista=document.getElementById('bloque');
Luego para acceder al primer prrafo: y sucesivamente

lista.childNodes[0].style.color='#ff0000'; lista.childNodes[1].style.color='#00ff00'; lista.childNodes[2].style.color='#0000ff'; alert('La cantidad de hijos del nodo div es:'+lista.childNodes.length); }
Accediendo a los nodos hijos de una marca HTML(childNodes)(FireFox)

le preguntamos al div cuantos hijos tiene, este nos responder 7 (siete) Entre la marca <div id="bloque"> y la marca <p> hay un salto de lnea (crea un nodo de texto, este es el primer nodo). Luego el primer prrafo es el segundo nodo. Entre el primer prrafo y el segundo hay otro salto de lnea (este es el tercer nodo) y as sucesivamente. Si contamos los prrafos y saltos de lnea podremos contabilizar los 7 hijos.
Solucion
<div id="bloque1"><p>Este es el primer prrafo</p><p>Este es el segundo prrafo</p><p>Este es el tercer prrafo</p></div>
Accediendo a un nodo de texto de una marca HTML (childNodes - nodeValue)

Es importante notar que el texto contenido en una marca no pertenece al nodo, sino que se encuentra en otro nodo especial que lo llamaremos nodo texto. <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body>
<h1 id="titulo">Este es el ttulo original</h1>

<input type="button" value="Cambiar Texto" onClick="cambiarTexto()"> </body> </html> El archivo funciones.js es: function cambiarTexto() {
var tit=document.getElementById('titulo'); tit.childNodes[0].nodeValue='Ahora vemos el nuevo ttulo';

}
Como ya hemos visto rescatamos la referencia a la marca h1 por medio de la funcin getElementById, luego mediante la propiedad childNodes accedemos a la primer componente que tiene la referencia al nodo de tipo texto. Por ltimo asignamos el nuevo texto a la propiedad nodeValue.
Accediendo a un nodo padre (parentNode)

Si tenemos la referencia a un nodo podemos obtener fcilmente la referencia del nodo padre mediante la propiedad parentNode. <body> <div> <p id="parrafo1">Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="Cambiar color de fondo del div" onClick="cambiarColor()"> </body> funciones.js function cambiarColor() { var puntero=document.getElementById('parrafo1'); var padre=puntero.parentNode; padre.style.backgroundColor='#ff0000'; }
y y y
Obtenemos la referencia del prrafo: Ahora accedemos a la propiedad parentNode de la variable inicializada previamente: Finalmente modificamos el color del div:
Accediendo a un nodo hermano (nextSibling y previousSibling)

Si tenemos la referencia de un nodo podemos fcilmente acceder a los otros nodos que se encuentran en la misma altura dentro del rbol que genera el DOM. <body> <div> <p id="parrafo1">Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="accediendo a los tres prrafos" onClick="proximoParrafo()"> </body> funciones.js function proximoParrafo() { var puntero1=document.getElementById('parrafo1'); alert(puntero1.childNodes[0].nodeValue); var puntero2=puntero1.nextSibling; alert(puntero2.childNodes[0].nodeValue); var puntero3=puntero2.nextSibling; alert(puntero3.childNodes[0].nodeValue); }
El mtodo nextSibling retorna la referencia del nodo que se encuentra inmediatamente ms abajo pero a la misma altura un mtodo llamado previusSibling que retorna la referencia del nodo que se encuentra inmediatamente ms arriba nextSibling y previusSibling retornan null en caso de no existir ms nodos en dicho nivel.
Otras formas de acceder a los nodos hijos (firstChild - lastChild)

Otra forma de acceder al primer y ltimo nodo hijo es por medio de las propiedades firstChild (retorna la referencia del primer hijo, es lo mismo que poner obj.childNodes[0]) y obj.lastChild (retorna la referencia del ltimo hijo, es sinnimo de poner obj.childNodes[obj.childNodes.length-1]) <body> <div id="parrafos"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p> Este es el tercer prrafo</p> </div> <input type="button" value="Modificar color del primer y ltimo prrafo" onClick="accederParrafos()"> </body> funciones.js function accederParrafos() { var puntero=document.getElementById('parrafos'); puntero.firstChild.style.color='#ff0000'; puntero.lastChild.style.color='#ff0000'; }
Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)

Disponemos en el objeto documento de un mtodo llamado: getElementsByTag("Nombre de la Marca") Retorna un vector con la referencia a todas las marcas de dicho tipo. A diferencia del mtodo getElementById que retorna la referencia de una sola marca, el mtodo getElementsByTag retorna un conjunto de referencias, las mismas se almacenan en un vector. <body> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> <input type="button" value="Agregar un punto al final de cada prrafo" onClick="cambiarParrafos()"> </body> Luego el archivo funciones.js es: function cambiarParrafos() { var lista=document.getElementsByTagName('p'); for(f=0;f<lista.length;f++) { lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.'; } } Hay que tener en cuenta que en el vector lista se almacena la referencia a todas las marcas de tipo prrafo (p) de la pgina. Luego para acceder al contenido de cada prrafo debemos hacerlo mediante el vector childNodes y mediante la propiedad nodeValue acceder al texto contenido en dicho prrafo. Disponemos el subndice cero en la propiedad childNodes ya que los prrafos definidos en el ejemplo tienen como hijo slo un texto. Para agregar un punto al final de cada prrafo slo debemos almacenar el contenido actual ms el string '.':
Accediendo a un conjunto de marcas HTML similares a partir de un Nodo (getElementsByTagName)

Podemos obtener la referencia a una marca HTML, y a partir de esta referencia llamar al mtodo getElementsByTagName. var obj=document.getElementById("bloque2"); var lista=obj.getElementsByTagName('p'); La cual retorna un vector con todas las marcas contenidas en ese bloque. Esto puede ser de gran utilidad cuando queremos hacer cambios a un conjunto de marcas similares del documento, pero que no afecten a todo el documento. Para probar el mtodo, agregaremos un punto al final de cada prrafo que estn contenidos en una marca (div). <body> <div id="bloque1"> <h1>Primer Bloque de prrafos.</h1> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <div id="bloque2"> <h1>Segundo Bloque de prrafos.</h1> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="Agregar un punto al final de cada prrafo" onClick="cambiarParrafos()"> </body>
function cambiarParrafos() { var obj=document.getElementById("bloque2"); var lista=obj.getElementsByTagName('p'); for(f=0;f<lista.length;f++) { lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.'; }
} Si queremos la referencia a todas las marcas de la pgina lo hacemos : var lista=document.getElementsByTagName('p'); Si queremos la referencia a todas las marcas similares contenidas en un div lo hacemos: var obj=document.getElementById("bloque2"); var lista=obj.getElementsByTagName('p');
Agregar un nodo de texto (appendChild - createTextNode)

Para la creacin de un nodo de texto disponemos del siguiente mtodo de la clase document: var nt=document.createTextNode('Texto del nodo'); Para aadirlo luego a un prrafo por ejemplo debemos llamar al mtodo appendChild: var nparrafo=document.getElementById('parrafo'); nparrafo.appendChild(nt); <body> <p id="parrafo">Texto inicial:</p> <input type="button" value="Agregar nodo de texto" onClick="agregar()"> </body> funciones.js var contador=1; function agregar() { var nt=document.createTextNode('Nuevo texto '+contador+'-'); var nparrafo=document.getElementById('parrafo'); nparrafo.appendChild(nt); contador++; }
Eliminar un nodo de texto (removeChild)

Para eliminar un nodo de texto disponemos de una funcin llamada: removeChild <body> <p id="parrafo">Texto inicial:</p> <input type="button" value="Agregar nodo de texto" onClick="agregar()"> <input type="button" value="Eliminar nodo de texto" onClick="eliminar()"> </body> funciones.html var contador=1; function agregar() { var nt=document.createTextNode('Nuevo texto '+contador+'-'); var nparrafo=document.getElementById('parrafo'); nparrafo.appendChild(nt); contador++; } function eliminar() { var nparrafo=document.getElementById('parrafo'); if (nparrafo.hasChildNodes()) { nparrafo.removeChild(nparrafo.lastChild); contador--; } }
Crear y agregar un nodo de tipo elemento (createElement - appendChild)

Para crear nodos de tipo elemento disponemos del mtodo createElement que contiene el objeto document: var elemento=document.createElement("Aca indicamos el nombre de la marca HTML a crear") <body> <div id="parrafos"> </div> <input type="button" value="Agregar nodo tipo elemento" onClick="agregar()"> </body> funciones.js function agregar() { var elemento=document.createElement('p'); var texto=document.createTextNode('Hola Mundo'); elemento.appendChild(texto); var obj=document.getElementById('parrafos'); obj.appendChild(elemento); } En la funcin agregar se crea un nodo de tipo elemento: Pero recordemos que los nodos elemento no contienen el texto, sino que hay que crear un nodo de texto y aadirlo al nodo de tipo elemento: Por ltimo obtenemos una referencia al div y aadimos el prrafo que acabamos de crear:
Agregar un nodo de tipo elemento en medio (insertBefore - createElement)

Para estos casos tenemos el mtodo insertBefore que inserta un nodo previo a otro que le pasamos como referencia en el segundo parmetro. <body> <div id="parrafos"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p id="p3">Este es el tercer prrafo</p> <p>Este es el cuarto prrafo</p> <p>Este es el quinto prrafo</p> </div> <input type="button" value="insertar otro prrafo entre el segundo y el tercero" onClick="insertarEnMedio()"> </body>
function insertarEnMedio() { var elemento=document.createElement('p'); var nodotexto=document.createTextNode('Prrafo entre segundo y tercero'); elemento.appendChild(nodotexto); var puntero=document.getElementById('p3'); var pa=document.getElementById('parrafos'); pa.insertBefore(elemento,puntero); }
Eliminar un nodo de tipo elemento (removeChild)

Para eliminar un nodo de tipo elemento disponemos del mtodo removeChild, este mtodo lo llamamos a partir del nodo padre. <body> <div id="parrafos"></div> <input type="button" value="Agregar nodo tipo elemento" onClick="agregar()"> <input type="button" value="Eliminar primer nodo tipo elemento" onClick="eliminarPrimero()"> <input type="button" value="Eliminar ltimo nodo tipo elemento" onClick="eliminarUltimo()"> </body> funciones.js var contador=1; function agregar() { var nuevoelemento=document.createElement("p"); var nuevotexto=document.createTextNode("Hola Mundo " + contador + " - "); contador++; nuevoelemento.appendChild(nuevotexto); var puntero=document.getElementById("parrafos"); puntero.appendChild(nuevoelemento); } function eliminarPrimero() { var puntero=document.getElementById("parrafos"); if (puntero.childNodes.length>0) puntero.removeChild(puntero.childNodes[0]); } function eliminarUltimo() { var puntero=document.getElementById("parrafos"); if (puntero.childNodes.length>0) puntero.removeChild(puntero.childNodes[puntero.childNodes.length-1]); }
Crear un atributo y agregrselo a un nodo de tipo elemento (setAttribute)

<body> <input type="button" value="Crear nodo tipo elemento y definir el atributo href" onClick="crearElementoyAtributo()"> <div id="direccion"> </div> funciones.js: function crearElementoyAtributo() { elemento=document.createElement('a'); var puntero=document.getElementById('direccion'); puntero.appendChild(elemento); nodotexto=document.createTextNode('google'); elemento.appendChild(nodotexto); elemento.setAttribute('href','http://www.google.com.ar'); }
Borrar un atributo de un elemento (removeAttribute)

<body> <a id="enlace1" href="http://www.google.com.ar">Google.</a><br> <a id="enlace2" href="http://www.yahoo.com.ar">Yahoo.</a><br> <input type="button" value="Eliminar atributos" onClick="eliminarAtributo()"> <input type="button" value="Inicializar atributos" onClick="inicializarAtributo()"> <br> </body> funciones.js function eliminarAtributo() { var puntero=document.getElementById('enlace1'); puntero.removeAttribute('href'); puntero=document.getElementById('enlace2'); puntero.removeAttribute('href'); } function inicializarAtributo() { var puntero=document.getElementById('enlace1'); puntero.setAttribute('href','http://www.google.com.ar'); puntero=document.getElementById('enlace2'); puntero.setAttribute('href','http://www.yahoo.com.ar'); }
Recuperar un atributo de un elemento (getAttribute)

<body> <a id="enlace" href="http://www.google.com.ar">Google.</a><br> <input type="button" value="Recuperar atributo href" onClick="recuperarAtributo()"> <br> </body> funciones.js function recuperarAtributo() { var puntero=document.getElementById('enlace'); alert(puntero.getAttribute('href')); }
Mover un nodo de tipo elemento.

<body> <div id="region1"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="Mover el primer prrafo" onClick="moverParrafo()"> <div id="region2"> </div> funciones.js function moverParrafo() { var puntero1=document.getElementById('region1'); var parrafo1=puntero1.firstChild; var puntero2=document.getElementById('region2'); puntero2.appendChild(parrafo1); }
Clonacin de un nodo (cloneNode)

Si queremos hacer una copia idntica de un nodo y ubicarlo en otra parte del rbol, podemos utilizar el mtodo: cloneNode(<true o false> ) Si le pasamos como parmetro el valor true, har una copia del nodo y todos sus descendientes; en caso de pasarle false slo hare una copia de dicho nodo. <body> <div id="enlaces"> <a href="#">Enlace 1</a><br> <a href="#">Enlace 2</a><br> <a href="#">Enlace 3</a><br> </div> <input type="button" onclick="javascript:clonarNodos()" value="Clonar nodos"> <div id="enlacesnuevos"> </div> </body> funciones.js var orden=1; function clonarNodos() { var id=document.getElementById("enlaces");
var nuevos=id.cloneNode(true); Ahora es importante tener en cuenta que los nodos clonados tienen el mismo valor en la propiedad id por lo que debemos modificrsela: nuevos.style.id='enlaces'+orden; orden++; id=document.getElementById("enlacesnuevos"); id.appendChild(nuevos); }
Consultar el tipo de nodo (nodeType)

Los nodos principales que puede tener el DOM son los nodos elemento y los nodos texto. Todo nodo tiene una propiedad nodeType que almacena de qu nodo es. Si almacena un 1 (uno) el nodo es de tipo elemento (div, a, p etc.), si almacena un 3 (tres) se trata de un nodo de tipo texto. A su vez, la propiedad nodeName almacena la marca HTML si se trata de un nodo de tipo elemento o el valor #text si se trata de un nodo de tipo text. Por ltimo, la propiedad nodeValue almacena el contenido del nodo si se trata de un nodo de tipo text, en caso de tratarse de un nodo de tipo elemento (es decir una mrca HTML) almacena null. <body> <div id="grupo"> <p>Este es un prrafo</p> </div> <input type="button" value="Verificar de que tipo de nodo se trata" onClick="tipoDeNodos()"> </body> funciones.js function tipoDeNodos() { var puntero=document.getElementById('grupo'); alert (puntero.nodeName + " es de tipo " + puntero.nodeType); esta es la etiqueta parrafo var hijo=puntero.childNodes[0]; alert (hijo.nodeName + " es de tipo " + hijo.nodeType); este es el texto lo que sigue var nieto=hijo.childNodes[0]; alert (nieto.nodeName + " es de tipo " + nieto.nodeType); }
Accediendo al estilo de una marca HTML.

Las propiedades de estilo CSS de una marca HTML se pueden modificar luego que la pgina se carg en el navegador, Debemos tener en cuenta que para acceder a los estilos, los nombres de las propiedades tienen un ligero cambio, esto es debido a que el caracter '-' no est permitido en JavaScript para la definicin de una variable. Luego, a todas las propiedades debemos sacarle el guin. Una propiedad llamada: font-size:10px; Luego desde JavaScript la debemos invocar como: puntero.style.fontSize='60px';
<html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p id="recuadro">Quin descubri Amrica y en que ao fue?</p> Color de fondo: <select onChange="cambiarColorFondo()" id="colorfondo"> <option value="#ffff00">amarillo</option> <option value="#ff0000">rojo</option> <option value="#00ff00">verde</option> <option value="#0000ff">azul</option> </select> estilos.css #recuadro { background-color:#ffff00; border:1px solid #000000; font-size:10px; } funciones.js function cambiarColorFondo() { var pun=document.getElementById('colorfondo'); var punrec=document.getElementById('recuadro'); punrec.style.backgroundColor=pun.value; } Primero obtenemos una referencia al control select: Luego obtenemos una referencia al prrafo: Por ltimo, mediante la referencia al prrafo, accedemos a la propiedad style y mediante sta, a la propiedad CSS respectiva, mediante la propiedad value del select extraemos el valor seleccionado:
Creacin de controles de tipo input dinmicamente.

Veamos un ejemplo donde podemos utilizar esta herramienta, supongamos que necesitamos ingresar nuestro nombre y el nombre de nuestros hijos. Podemos sin duda disponer un control de tipo text para el ingreso de nuestro nombre y varios otros controles de tipo text para los nombres de los hijos (pero cuntos?),
Podemos solucionar esta situacin disponiendo un botn para crear un elemento de tipo input cada vez que sea presionado.
<body> <form method="post"> Ingrese su nombre: <input type="text" name="nombre" id="nombre"><br> <fieldset id="fs"> <legend>Ingrese los nombres de sus hijos</legend> <input type="button" onclick="agregarHijo()" value="Presione el botn para agregar un hijo."> <br> </fieldset> <input type="submit" value="Registrar"> </form> </body> funciones.js var cantidad = 0; function agregarHijo() { cantidad++; var nuevohijo = document.createElement('input'); nuevohijo.type = 'text'; nuevohijo.name = 'nombre' + cantidad; nuevohijo.id = 'nombre' + cantidad; document.getElementById('fs').appendChild(nuevohijo); document.getElementById('fs').appendChild(document.createElement('br')); }
Gestin de eventos en JavaScript

Un evento es un suceso que ocurre cuando se presiona una tecla, se presiona un botn, se dispone la flecha del mouse en una regin, etc. Desde JavaScript podemos capturar estos eventos y efectuar un proceso (cambiar la fuente, abrir otra pgina, mostrar un mensaje etc.)
Evento onclick
<body> <p onclick="presionParrafo()">Esto es un prrafo<p> <table border="1"> <tr> <td onclick="presionCasilla11()">casilla 1,1</td><td>casilla 1,2</td> </tr> <tr> <td>casilla 2,1</td><td>casilla 2,2</td> </tr> </table> <input type="button" value="botn" onclick="presionBoton()"> </body> El archivo funciones.js es: function presionParrafo() { alert('se presion el prrafo'); } function presionCasilla11() { alert('se presion la casilla 1,1'); } function presionBoton() { alert('se presion el botn'); }
Referencia del objeto que gener el evento (this)
Cuando tenemos varios objetos que generan eventos y todos se asocian con una nica funcin podemos pasar en la llamada a la funcin la referencia del objeto que emite el evento, esto mediante la palabra clave this. <body> <h1 id="titulo">Datos del objeto que emite el evento.</h1> <input type="button" name="boton1" value="boton 1" id="b1" onclick="mostrarAtributos(this)"> <br> <input type="button" name="boton2" value="boton 2" id="b2" onclick="mostrarAtributos(this)"> </body> funciones.js function mostrarAtributos(objeto)
{ var ref=document.getElementById('titulo'); ref.firstChild.nodeValue='Name:'+objeto.name+' Id:'+objeto.id+' Value:'+objeto.value; accedemos a su nodo hijo (es decir al nodo de texto) para mostrar la informacion sobre las propiedades del objeto que gener el evento: }
Informacin generada en un evento

Bueno ahora empiezan los problemas cuando queremos recuperar informacin que se genera cuando se dispara un evento. inicializamos el evento onclick para la marca body pasamos a la funcin presionado el objeto event. Este parmetro solo funciona para FireFox: <body onclick="presionado(event)" id="cuerpo"> Hacer clic dentro del navegador y se mostrar la coordenada del mouse en ese momento. </body> El nombre del parmetro puede ser cualquiera pero en la llamada a la funcin debe ser event function presionado(e) { Es decir debemos verificar si existe la propiedad event en el objeto window con lo que nos aseguramos que se trata del Internet Explorer: if (window.event) //es ie? { Si se trata del Internet Explorer rescatamos la coordenada de la flecha del mouse mediante la propiedad clientX y client alert('Coordenada x de la flecha del mouse:'+window.event.clientX+'\n'+ 'Coordenada y de la flecha del mouse:'+window.event.clientY); } else { En caso de tratarse del navegador FireFox como el objeto window no tiene la propiedad event el if se verifica falso por lo que ejecuta el else: alert('Coordenada x de la flecha del mouse:'+e.clientX+'\n'+ 'Coordenada y de la flecha del mouse:'+e.clientY); } }
Eventos onmousedown,onmouseup
El evento onmousedown se dispara cuando presionamos alguno de los botones del mouse y el evento onmouseup cuando dejamos de presionar el botn. <body> <table border="1"> <tr> <td onmousedown="presionar(this)" onmouseup="levantar(this)">Recuadro 1</td><td onmousedown="presionar(this)" onmouseup="levantar(this)">Recuadro 2</td> </tr> </table> </body> funciones.js function presionar(objeto) { objeto.style.background='#ff0'; } function levantar(objeto) { objeto.style.background='#fff'; }
Evento ondblclick
El evento ondblclick se dispara cuando se presiona dos veces seguidas el botn izquierdo del mouse. <body> <div id="recuadro" ondblclick="ocultar(this)"> <h1>Doble clic para ocultar este recuadro</h1> </div> </body> estilos.css #recuadro { color:#aa0; background-color:#ff0; position:absolute; text-align:center; left:40px; top:30px; width:800px; height:70px; } funciones.js function ocultar(objeto)
{ objeto.style.display='none'; } Para ocultar el div accedemos a la propiedad display y le asignamos el valor none.
Eventos onmouseover, onmouseout

Los eventos onmouseover y onmouseout estn generalmente unidos. El primero se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el segundo cuando sacamos la flecha del control. <body> <input type="button" name="boton1" value="boton 1" onmouseover="entrada(this)" onmouseout="salida(this)"> <br> <input type="button" name="boton2" value="boton 2" onmouseover="entrada(this)" onmouseout="salida(this)"> <br> <input type="button" name="boton3" value="boton 3" onmouseover="entrada(this)" onmouseout="salida(this)"> </body> funciones.js function entrada(objeto) { objeto.style.color='#f00'; } function salida(objeto) { objeto.style.color='#000'; }
Evento onmousemove
Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo. <body id="region" onmousemove="mover(event)"> <p id="corx">coordenada x=</p> <p id="cory">coordenada y=</p> </body> funciones.js function mover(e) { var corx=document.getElementById('corx'); var cory=document.getElementById('cory'); if (window.event) { corx.firstChild.nodeValue='coordenada x='+window.event.clientX; cory.firstChild.nodeValue='coordenada y='+window.event.clientY; } else { corx.firstChild.nodeValue='coordenada x='+e.clientX; cory.firstChild.nodeValue='coordenada y='+e.clientY; } }
Evento onload y onunload

El evento onload se dispara cuando terminamos de cargar toda la pgina. El evento onunload se dispara cuando salimos del sitio y nos dirijimos por medio de un hipervnculo a otro o cerramos la ventana del navegador. <body onload="ventanaBienvenida()" onunload="ventanaDespedida()"> Sitio. </body> funciones.js function ventanaBienvenida() { var ventana=open('','','status=yes,width=400,height=250'); ventana.document.write("Bienvenido a este sitio."); } function ventanaDespedida() { var ventana=open('','','status=yes,width=400,height=250'); ventana.document.write("Hasta siempre.");
Modelo de eventos del DOM segn la especificacin de W3C.

La administracin de eventos propuesto por la W3C es significativamente diferente al modelo visto hasta ahora para atrapar los eventos. Como ventaja podemos decir que todos los navegadores futuros tendern a implementar este modelo por lo que tal vez algn da nuestro cdigo JavaScript no tenga que estar preguntando en que navegador y en que versin de ese navegador se est ejecutando.
Evento load (DOM)

En este nuevo modelo tenemos una funcin fundamental llamada: addEventListener
Esta funcin la tienen incorporada casi todos los objetos del DOM (recordemos nuestro rbol) Para llamarla debemos hacerla a partir de la referencia de un objeto y pasarle tres parmetros: -El nombre del evento que queremos capturar (load,click,unload etc.) -El nombre de la funcin que se dispara cuando se produce el evento. -El tercer parametro un valor boolean que por ahora le pasaremos el valor false. <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> Este sitio no funciona bien en el IE6. </body> </html> funciones.js window.addEventListener('load',ventanaBienvenida,false); function ventanaBienvenida(e) { var ventana=open('','','status=yes,width=400,height=250'); ventana.document.write("Bienvenido a este sitio."); } no hay ninguna llamada a funciones JavaScript en el archivo HTML, solo incluimos el archivo funciones.js: <script languaje="javascript" src="funciones.js" type="text/javascript"></script> Lo ms importante est ahora ubicado en el archivo funciones.js, fuera de cualquier funcin, es decir se ejecuta cuando comienza a cargarse la pgina es la llamada de la funcin addEventListener a partir del objeto window (recordemos que este objeto se crea automticamente): window.addEventListener('load',ventanaBienvenida,false); Le pasamos como referencia el evento que queremos capturar (load), debe ir entre comillas, el segundo parmetro es la funcin que debe ejecutarse cuando se dispare el evento load y false en el tercer parmetro. Es importante tener en cuenta que el nombre de la funcin no debe llevar parntesis de apertura y cerrado Donde codificamos la funcin debemos indicar un parmetro que contiene informacin til con respecto al evento que se a disparado (si bien en este problema no lo utilizamos en otros problemas ser de vital importancia
,
Evento click (DOM)

<body> <input type="button" value="Botn 1" id="b1"><br> <input type="button" value="Botn 2" id="b2"> </body> funciones.js window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var boton1=document.getElementById('b1');
boton1.addEventListener('click',presionBoton1,false);
var boton2=document.getElementById('b2'); boton2.addEventListener('click',presionBoton2,false); } function presionBoton1(e) { var boton1=document.getElementById('b1'); alert(boton1.getAttribute('value')); } function presionBoton2(e) { var boton2=document.getElementById('b2'); alert(boton2.getAttribute('value')); }
La registracin de los eventos para cada botn lo hacemos en la funcin inicializarEventos (esto no es un capricho sino esto se debe que el navegador debe cargar toda la pgina en memoria para que se cree el rbol de elementos, de no hacerlo de esta manera el mtodo getElementById no retornar la referencia del botn ya que no est creado) Obtenemos la referencia al primer botn y nuevamente mediante el mtodo addEventListener registramos el evento click y la funcin a ejecutarse cuando sea presionado. Este proceso lo hacemos para los dos botones. Solo tienen el objetivo de obtener inicialmente la referencia del botn respectivo y llamar al mtodo getAttibute solicitando el atributo value.
Referencia del objeto que gener el evento (DOM)
La funcin que se dispara al producirse el evento recibe un parmetro con informacin referente a ese evento.
<body> <h1 id="titulo">Datos del objeto que emite el evento.</h1> <input type="button" name="boton1" value="boton 1" id="b1"> <br> <input type="button" name="boton2" value="boton 2" id="b2"> </body> funciones.js window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var boton1=document.getElementById('b1'); boton1.addEventListener('click',presionBoton,false); var boton2=document.getElementById('b2'); boton2.addEventListener('click',presionBoton,false); } function presionBoton(e) { var boton=e.target; var ref=document.getElementById('titulo'); ref.firstChild.nodeValue='Name:'+boton.name+' Id:'+boton.id+' Value:'+boton.value; } La funcin recibe un parmetro con detalles del evento, entre otros: target: Referencia del objeto que gener el evento(en nuestro problema la referencia del botn b1 o b2) type: El nombre del evento (en nuestro caso click) button: El botn del mouse presionado (0 = izquierdo, 1 = medio, 2 = derecho) keyCode: El caracter del teclado presionado (en caso que corresponda) shiftKey: true o false en caso de estar presionada esta tecla.
Eventos mousedown ,mouseup (DOM)

<body> <table border="1"> <tr> <td id="recu1">Recuadro 1</td><td id="recu2">Recuadro 2</td> </tr> </table> </body> funciones.js window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var r1=document.getElementById('recu1'); r1.addEventListener('mousedown',presionar,false); r1.addEventListener('mouseup',soltar,false); var r2=document.getElementById('recu2'); r2.addEventListener('mousedown',presionar,false); r2.addEventListener('mouseup',soltar,false); } function presionar(e) { var objeto=e.target; objeto.style.background='#ffff00'; } function soltar(e) { var objeto=e.target; objeto.style.background='#ffffff'; } En la funcin inicializarEventos obtenemos la referencia a cada celda de la tabla y le asignamos los dos eventos:
Evento dblclick (DOM)

El evento ondblclick se dispara cuando se presiona dos veces seguidas el botn izquierdo del mouse dentro de la marca que est escuchando dicho evento. <body> <div id="recuadro"> </div> </body> estilos.css #recuadro { color:#aa0; background-color:#ff0; position:absolute;
text-align:center; left:40px; top:30px; width:800px; height:70px; } funciones.js window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var recu=document.getElementById('recuadro'); recu.addEventListener('dblclick',ocultar,false); } function ocultar(e) { e.target.style.display='none'; }
Eventos mouseover, mouseout (DOM)

el evento mouseover se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el mouseout cuando sacamos la flecha del control <body> <input type="button" name="boton1" value="boton 1"> <br> <input type="button" name="boton2" value="boton 2"> <br> <input type="button" name="boton3" value="boton 3"> </body> funciones.js window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var vec=document.getElementsByTagName('input'); for(f=0;f<vec.length;f++) { vec[f].addEventListener('mouseover',entrar,false); vec[f].addEventListener('mouseout',salir,false); } } function entrar(e) { e.target.style.color='#f00'; } function salir(e) { e.target.style.color='#000'; } por medio de la funcin getElementsByTagName que nos proporciona el DOM obtenemos un vector con la referencia a todos los objetos de tipo input contenidos en la pgina. Luego dentro de un for llamamos a la funcin addEventListener inicializando los eventos mouseover y mouseout:
Evento mousemove (DOM)

Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML <body id="region"> <p id="corx">coordenada x=</p> <p id="cory">coordenada y=</p> </body> window.addEventListener('load',inicializarEventos,false); function inicializarEventos(e) { var ref=document.getElementsByTagName('html'); ref[0].addEventListener('mousemove',mover,false); } function mover(e) { var corx=document.getElementById('corx'); var cory=document.getElementById('cory'); corx.firstChild.nodeValue='coordenada x='+e.clientX; cory.firstChild.nodeValue='coordenada y='+e.clientY; }
Modelo de eventos del Internet Explorer (Microsoft) Evento onload(Internet Explorer)
En el modelo propuesto por Microsoft existe una funcin fundamental llamada: attachEvent Esta funcin la tienen incorporada casi todos los objetos del DOM (recordemos nuestro rbol) Para llamarla debemos hacerla a partir de la referencia de un objeto y pasarle dos parmetros: -El nombre del evento que queremos capturar (onload,onclick,onunload etc.) Es importante notar que debemos antecedirle las letras on a cada evento, esto difiere con la propuesta de la W3C. -El nombre de la funcin que se dispara cuando se produce el evento. <body> Este sitio no funciona bien en el FireFox. </body> funciones.js window.attachEvent('onload',ventanaBienvenida); function ventanaBienvenida() { var ventana=open('','','status=yes,width=400,height=250'); ventana.document.write("Bienvenido a este sitio."); }
Evento onclick(Internet Explorer)

<body> <input type="button" value="Botn 1" id="b1"><br> <input type="button" value="Botn 2" id="b2"> </body>
funciones.js window.attachEvent('onload',inicializarEventos); function inicializarEventos() { var boton1=document.getElementById('b1'); boton1.attachEvent('onclick',presionBoton1); var boton2=document.getElementById('b2'); boton2.attachEvent('onclick',presionBoton2); } function presionBoton1() { var boton1=document.getElementById('b1'); alert(boton1.getAttribute('value')); } function presionBoton2() { var boton2=document.getElementById('b2'); alert(boton2.getAttribute('value')); }
Referencia del objeto que gener el evento (Internet Explorer)

srcElement: Referencia del objeto que emiti el evento. type: Tipo de evento disparado (onclick, onload etc.) button: Nmero de botn del mouse presionado: 0 No hay botones presionados. 1 Botn izquierdo presionado. 2 Botn derecho presionado. 3 Botones izquierdo y derecho presionados. 4 Botn central presionado. 5 Botones izquierdo y central presionados. 6 Botones derecho y central presionados. 7 Botones izquierdo, central y derecho presionados. keyCode: El caracter del teclado presionado (en caso que corresponda) shiftKey: true o false en caso de estar presionada esta tecla. <body> <h1 id="titulo">Datos del objeto que emite el evento.</h1> <input type="button" name="boton1" value="boton 1" id="b1"> <br> <input type="button" name="boton2" value="boton 2" id="b2"> </body> funciones.js window.attachEvent('onload',inicializarEventos); function inicializarEventos(e) { var boton1=document.getElementById('b1'); boton1.attachEvent('onclick',presionBoton);
Hay que tener bien en cuenta que en el Internet Explorer la funcin que se dispara cuando se produce el evento no recibe como parmetro los datos del evento sucedido en lugar de esto inicializa el atributo event del objeto window Los atributos ms importantes de la propiedad event del objeto window son:
var boton2=document.getElementById('b2'); boton2.attachEvent('click',presionBoton); } function presionBoton() { var boton=window.event.srcElement; var ref=document.getElementById('titulo'); ref.firstChild.nodeValue='Name:'+boton.name+' Id:'+boton.id+' Value:'+boton.value; }
Haciendo cdigo que funcione en FireFox e Internet Explorer.

debemos disponer cdigo dependiente a la plataforma en aquellos lugares donde difieren los nombres de funciones o atributos. Ya hace un tiempo Scott Andrew plante una funcin que registra el evento segn la plataforma que se trate, la funcin en cuestin es:
function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
El primer parmetro "elemento" es la referencia del objeto que registrar el evento (window, un botn, la referencia de un div etc.), el segundo parmetro indica el nombre del evento a registrar (load, click, unload, dblclick, mouseover etc), el tercer parmetro la referencia de la funcin que se ejecutar cuando se produzca el evento y el ltimo parmetro un valor lgico (por ahora false) El primer if de la funcin verifica si nos encontramos en el navegador Internet Explorer: if (elemento.attachEvent) Es decir si el elemento tiene implementado el mtodo attachEvent significa que es el navegador de Microsoft. Procedemos entonces a llamar al mtodo attachEvent con los parmetros que llegan a la funcin. Por el else verificamos si se trata de un navegador compatible con la especificacin del DOM dada por la W3C: if (elemento.addEventListener) Si es verdadera esta condicin llamamos al mtodo addEventListener con los valores respectivos. <body> Este sitio funciona bien en FireFox e Internet Explorer. </body> </html> funciones.js addEvent(window,'load',ventanaBienvenida,false); function ventanaBienvenida() { var ventana=open('','','status=yes,width=400,height=250'); ventana.document.write("Bienvenido a este sitio."); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } El archivo HTML no sufre ningn cambio, esto debido a que todo el cdigo JavaScript se encuentra en un archivo separado llamado funciones.js. Fuera de cualquier funcin llamos a la funcin addEvent: addEvent(window,'load',ventanaBienvenida,false);
Es decir que cuando comienza a cargarse la pgina ya se registra el evento load del objeto window. Veamos que no llamamos a la funcin addEventListener o attachEvent, ya que eso lo hace la funcin addEvent.
Evento click (IE y DOM)

<body> <input type="button" value="Botn 1" id="b1"> <input type="button" value="Botn 2" id="b2"> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var boton1=document.getElementById('b1'); addEvent(boton1,'click',presionBoton,false); var boton2=document.getElementById('b2'); addEvent(boton2,'click',presionBoton,false); } function presionBoton(e) { if (window.event) { var ref=window.event.srcElement; alert(ref.value); } else if (e) { var ref=e.target; alert(ref.value); } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento dblclick (IE y DOM)

El evento ondblclick se dispara cuando se presiona dos veces seguidas el botn izquierdo del mouse dentro de la marca que est escuchando dicho evento. <body> <div id="recuadro"> </div> </body> </html> estilos.css #recuadro { color:#aa0; background-color:#ff0; position:absolute; text-align:center; left:40px; top:30px; width:800px; height:70px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var div=document.getElementById('recuadro'); addEvent(div,'dblclick',presionBoton,false); } function presionBoton(e)
{ if (window.event) { var ref=window.event.srcElement; ref.style.display='none'; } else if (e) { var ref=e.target; ref.style.display='none'; } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Eventos mousedown, mouseup(IE y DOM)

Recordemos que el evento mousedown se dispara cuando presionamos alguno de los botones del mouse y el evento mouseup cuando dejamos de presionar el botn. <body> <table border="1"> <tr> <td>Recuadro 1</td><td>Recuadro 2</td> </tr> </table> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var vec=document.getElementsByTagName('td'); for(f=0;f<vec.length;f++) { addEvent(vec[f],'mousedown',presionarBoton,false); addEvent(vec[f],'mouseup',soltarBoton,false); } } function presionarBoton(e) { if (window.event) { var ref=window.event.srcElement; ref.style.background='#ff0'; } else if (e) { var ref=e.target; ref.style.background='#ff0'; } } function soltarBoton(e) { if (window.event) { var ref=window.event.srcElement; ref.style.background='#fff'; } else if (e) { var ref=e.target; ref.style.background='#fff'; }
} function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Eventos mouseover, mouseout(IE y DOM)

Recordemos que el primero se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el segundo cuando sacamos la flecha del control. <body> <input type="button" name="boton1" value="boton 1"> <br> <input type="button" name="boton2" value="boton 2"> <br> <input type="button" name="boton3" value="boton 3"> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var vec=document.getElementsByTagName('input'); for(f=0;f<vec.length;f++) { addEvent(vec[f],'mouseover',entrar,false); addEvent(vec[f],'mouseout',salir,false); } } function entrar(e) { if (window.event) { var ref=window.event.srcElement; ref.style.color='#f00'; } else if (e) { var ref=e.target; ref.style.color='#f00'; } } function salir(e) { if (window.event) { var ref=window.event.srcElement; ref.style.color='#000'; } else if (e) { var ref=e.target; ref.style.color='#000'; } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; }
else return false; }
Evento mousemove (IE y DOM)

Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo. <body id="region"> <p id="corx">coordenada x=</p> <p id="cory">coordenada y=</p> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementsByTagName('html'); addEvent(ob[0],'mousemove',mover,false); } function mover(e) { if (window.event) { var corx=document.getElementById('corx'); var cory=document.getElementById('cory'); corx.firstChild.nodeValue='coordenada x='+window.event.clientX; cory.firstChild.nodeValue='coordenada y='+window.event.clientY; } else if (e) { var corx=document.getElementById('corx'); var cory=document.getElementById('cory'); corx.firstChild.nodeValue='coordenada x='+e.clientX; cory.firstChild.nodeValue='coordenada y='+e.clientY; } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento focus (IE y DOM)

<body> <form action="#" method="post"> <input type="text" name="buscar" id="buscar" value="Buscar..." size="20"> </form> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('buscar'); addEvent(ob,'focus',tomarFoco,false); } function tomarFoco(e) { if (window.event) { window.event.srcElement.value=''; } else if (e) { e.target.value='';
} } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento blur (IE y DOM)

El evento blur se dispara cuando pierde el foco el control. <body> <form action="#" method="post"> <input type="text" name="text1" id="text1" value="Hola" size="20"> <br> <input type="text" name="text2" id="text2" value="Hola" size="20"> </form> </body> </html> estilos.css #text1,#text2 { color:#00f; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob1=document.getElementById('text1'); addEvent(ob1,'focus',tomarFoco,false); addEvent(ob1,'blur',perderFoco,false); var ob2=document.getElementById('text2'); addEvent(ob2,'focus',tomarFoco,false); addEvent(ob2,'blur',perderFoco,false); } function tomarFoco(e) { if (window.event) { window.event.srcElement.style.color='#f00'; } else if (e) { e.target.style.color='#f00'; } } function perderFoco(e) { if (window.event) { window.event.srcElement.style.color='#00f'; } else if (e) { e.target.style.color='#00f'; } }
function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; }
else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento submit (IE y DOM)

Este evento se dispara cuando presionamos un botn de tipo submit contenido en un formulario. <body> <form action="#" method="post" id="formulario"> usuario:<input type="text" name="usuario" id="usuario" size="20"> <br> clave:<input type="password" name="clave" id="clave" size="20"> <br> <input type="submit" value="Entrar"> </form> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob1=document.getElementById('formulario'); addEvent(ob1,'submit',enviarDatos,false); } function enviarDatos(e) { var nom=document.getElementById('usuario'); var cla=document.getElementById('clave'); if (nom.value=='' || cla.value=='') { alert('debe ingresar los dos datos'); si se trata de un navegador compatible con W3C se debe llamar al mtodo preventDefault para evitar que se ejecute el envo de datos al servidor. Para el IE con retornar false se evita el envio de datos al servidor. if (e.preventDefault) e.preventDefault(); return false; } else return true; } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Eventos keypress, keydown y keyup (IE y DOM)

El evento keypress se dispara cuando pulsamos y soltamos luego una tecla. El evento keydown se activa cuando se pulsa la tecla. El evento keyup se activa cuando una tecla que se encuentra presionada se deja de pulsar. <body> <form action="" method="post"> Nombre de usuario:<input type="text" id="usuario" size="20"> </form> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('usuario'); addEvent(ob,'keypress',presionTecla,false); }
function presionTecla(e) { if (window.event) { extraemos la tecla presionada con: var tecla=window.event.keyCode; Si el valor de la tecla presionada es 32 (espacio en blanco) procedemos a mostrar un mensaje y a cancelar la accin por defecto que es agregar el caracter de espacio en blanco dentro del control: if (tecla==32) { window.event.returnValue=false; alert('No se puede ingresar espacios en blanco para un nombre de usuario'); } } else if (e) { extraemos la tecla presionada con: var tecla=e.which; Si el valor de la tecla presionada es 32 (espacio en blanco) procedemos a mostrar un mensaje y a cancelar la accin por defecto que es agregar el caracter de espacio en blanco dentro del control: if(tecla==32) { e.preventDefault(); alert('No se puede ingresar espacios en blanco para un nombre de usuario'); } } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento change (IE y DOM)

El evento change se dispara para los controles select, textarea e input de tipo text. Cuando estamos perdiendo el foco del control input o select si el contenido a cambiado se dispara el evento change, en cambio para el control select se dispara cada vez que seleccionamos un nuevo item. <body> <form action="#"> Nombre:<input type="text" id="nombre" name="nombre"><br> Apellido:<input type="text" id="apellido" name="apellido"><br> Cantidad de hijos: <select id="hijos"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <input type="submit" value="confirmar"> </form> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('nombre'); addEvent(ob,'change',modificarControl,false); ob=document.getElementById('apellido'); addEvent(ob,'change',modificarControl,false); ob=document.getElementById('hijos'); addEvent(ob,'change',modificarControl,false); } function modificarControl(e) {
var ob; if (window.event) ob=window.event.srcElement; else ob=e.target; alert('Se modific el control:'+ob.getAttribute('id')); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Evento scroll (IE y DOM)

El evento scroll se dispara cuando cambiamos alguna de las barras de desplazamiento horizontal o vertical. <body> <div id="mensaje">Ttulo siempre visible.</div> <p>Lnea 1.</p> <p>Lnea 2.</p> <p>Lnea 3.</p> <p>Lnea 4.</p> <p>Lnea 5.</p> <p>Lnea 6.</p> <p>Lnea 7.</p> <p>Lnea 8.</p> <p>Lnea 9.</p> <p>Lnea 10.</p> <p>Lnea 11.</p> <p>Lnea 12.</p> <p>Lnea 13.</p> <p>Lnea 14.</p> <p>Lnea 15.</p> <p>Lnea 16.</p> <p>Lnea 17.</p> <p>Lnea 18.</p> <p>Lnea 19.</p> <p>Lnea 20.</p> <p>Lnea 21.</p> <p>Lnea 22.</p> <p>Lnea 23.</p> <p>Lnea 24.</p> <p>Lnea 25.</p> <p>Lnea 26.</p> <p>Lnea 27.</p> <p>Lnea 28.</p> <p>Lnea 29.</p> <p>Lnea 30.</p> <p>Lnea 31.</p> <p>Lnea 32.</p> <p>Lnea 33.</p> <p>Lnea 34.</p> <p>Lnea 35.</p> <p>Lnea 36.</p> <p>Lnea 37.</p> <p>Lnea 38.</p> <p>Lnea 39.</p> <p>Lnea 40.</p> </body> </html> estilos.css #mensaje { position: absolute; top: 0px; left: 0px; color: #000; width: 1024px; height: 50px; background-color:#ff0; text-align:center; font-family:arial; font-size:30px; } funciones.js
addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { addEvent(window,'scroll',cambioScroll,false); } function cambioScroll(e) { var mensaje = document.getElementById("mensaje"); mensaje.style.top = document.body.scrollTop; } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } Para conocer cual es el valor de scroll vertical la propiedad body del objeto document contiene la propiedad scrollTop. Este valor se lo asignamos a nuestro div. Tengamos en cuenta que si queremos recuperar el valor de scroll horizontal tenemos la propiedad: document.body.scrollLeft
Informacin contenida en el objeto event (IE)

Como hemos visto cuando se dispara el evento la funcin que lo captura recibe como parmetro datos del evento respectivo, esto si se trata del DOM estndar, en caso de tratarse del IE la informacin est almacenada en la propiedad event del objeto global window (window.event) <body> <h1>Solo funciona correctamente en IE.</h1> <pre id="recuadro"> Presione con el mouse el recuadro. </pre> </body> </html> estilos.css #recuadro { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('recuadro'); addEvent(ob,'click',presionMouse,false); } function presionMouse() { var ob=window.event.srcElement; while (ob.hasChildNodes()) { ob.removeChild(ob.lastChild); } var nt=document.createTextNode('Tecla alt presionada (window.event.altKey) ? '+ ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('Tecla ctrl presionada (window.event.ctrlKey) ? '+ ob.appendChild(nt); insertarBR(ob);
window.event.altKey);
window.event.ctrlKey);
var nt=document.createTextNode('Tecla shift presionada (window.event.shiftKey) ? '+ ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('Nombre del evento (window.event.type) ? ' ob.appendChild(nt);
window.event.shiftKey);
+window.event.type);
insertarBR(ob); var nt=document.createTextNode('El elemento que causo el evento (window.event.srcElement) ? '+ window.event.srcElement); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto a la ventana (window.event.clientX) ? '+ window.event.clientX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto a la ventana (window.event.clientY) ? '+ window.event.clientY); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto a la pantalla completa (window.event.screenX) ? '+ window.event.screenX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto a la pantalla completa (window.event.screenY) ? '+ window.event.screenY); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto al comienzo de la pgina (window.event.offsetX) ? '+ window.event.offsetX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto al comienzo de la pgina (window.event.offsetY) ? '+ window.event.offsetY); ob.appendChild(nt); insertarBR(ob); } function insertarBR(ob) { var elemento=document.createElement('br'); ob.appendChild(elemento); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Informacin contenida en el objeto event (DOM)

La informacin relacionada al evento utilizando el DOM de W3C llega como parmetro a la funcin. <body> <h1>Solo funciona correctamente en navegadores que cumplen el estandar de W3C.</h1> <pre id="recuadro"> Presione con el mouse el recuadro. </pre> </body> </html> estilos.css #recuadro { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } funciones.js addEvent(window,'load',inicializarEventos,false);
function inicializarEventos() { var ob=document.getElementById('recuadro'); addEvent(ob,'click',presionMouse,false); } function presionMouse(e) { var ob=e.target; while (ob.hasChildNodes()) { ob.removeChild(ob.lastChild); } var nt=document.createTextNode('Tecla alt presionada (e.altKey) ? '+e.altKey); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('Tecla ctrl presionada (e.ctrlKey) ? '+e.ctrlKey); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('Tecla shift presionada (e.shiftKey) ? '+e.shiftKey); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('Nombre del evento (e.type) ? '+ e.type); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('El elemento que causo el evento (e.target) ? '+e.target); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto a la ventana (e.clientX) ? '+ e.clientX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto a la ventana (e.clientY) ? '+ e.clientY); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto a la pantalla completa (e.screenX) ? '+ e.screenX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto a la pantalla completa (e.screenY) ? '+ e.screenY); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada x del mouse respecto al comienzo de la pgina (e.pageX) ? '+ e.pageX); ob.appendChild(nt); insertarBR(ob); var nt=document.createTextNode('La coordenada y del mouse respecto al comienzo de la pgina (e.pageY) ? '+ e.pageY); ob.appendChild(nt); insertarBR(ob); } function insertarBR(ob) { var elemento=document.createElement('br'); ob.appendChild(elemento); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Burbujeo y captura de eventos (Dom)

El DOM permite capturar los eventos producidos en dos rdenes distintos. Si al tercer parmetro del mtodo addEventListener le pasamos un valor false, luego el evento se captura primero por el objeto que produjo el evento y luego es capturado por todos los otros objetos superiores que capturan dicho evento. En caso de pasar el valor true, el evento es capturado por objetos que pertenecen a niveles superiores del DOM para luego ser capturado por el objeto que dispar el evento. <body> <h1>Presione con el mouse en el recuadro interior y en el recuadro exterior.</h1> <h3>Si disponemos false en el tercer parmetro de la funcin addEvent</h3> <div id="div1e" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div1i" class="recuadrointerior"> Este es contenido del recuadro interior. </div> Tambin es contenido del recuadro exterior. </div> <h3>Si disponemos true en el tercer parmetro de la funcin addEvent</h3> <div id="div2e" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div2i" class="recuadrointerior"> Este es contenido del recuadro interior. </div> Tambin es contenido del recuadro exterior. </div> </body> estilos.css .recuadrointerior { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } .recuadroexterior { font-family:Courier; font-size:12px; background-color:#ff9900; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('div1i'); addEvent(ob,'click',presionRecuadroInte,false); ob=document.getElementById('div1e'); addEvent(ob,'click',presionRecuadroExte,false); ob=document.getElementById('div2i'); addEvent(ob,'click',presionRecuadroInte,true); ob=document.getElementById('div2e'); addEvent(ob,'click',presionRecuadroExte,true); } function presionRecuadroInte() { alert('se presion el recuadro interior'); } function presionRecuadroExte() { alert('se presion el recuadro exterior'); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) {
elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } Como podemos observar indicamos en el cuarto parmetro el valor false, con esto logramos que cuando se dispare el evento click primero lo capture el div interior y luego el div exterior. Luego: ob=document.getElementById('div2i'); addEvent(ob,'click',presionRecuadroInte,true); ob=document.getElementById('div2e'); addEvent(ob,'click',presionRecuadroExte,true); Si pasamos como parmetro a la funcin addEvent el valor true significar que si presionamos el botn del mouse dentro del div interior primero se dispara el evento del div exterior y por ltimo se dispara el evento click del div interior.
Burbujeo de eventos (IE)

El IE permite solo el burbujeo de eventos. Lo podemos comprabar fcilmente viendo los parmetros de la funcin attachEvent, recordemos que esta solo tiene dos parmetros (el nombre del evento y la funcin asociada con dicho evento) Luego si utilizamos nuestra funcin addEvent que hace compatible la registracin del evento en el caso de estar ejecutandose en el navegador IE el resultado es lo mismo si pasamos el valor true o false al tercer parmetro. Es decir siempre se dispara primero el evento del objeto emisor y luego burbujea hacia los elementos superiores del DOM. <body> <h1>Presione con el mouse en el recuadro interior y en el recuadro exterior.</h1> <h3>Si disponemos false en el tercer parmetro de la funcin addEvent</h3> <div id="div1e" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div1i" class="recuadrointerior"> Este es contenido del recuadro interior. </div> Tambin es contenido del recuadro exterior. </div> <h3>Si disponemos true en el tercer parmetro de la funcin addEvent</h3> <div id="div2e" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div2i" class="recuadrointerior"> Este es contenido del recuadro interior. </div> Tambin es contenido del recuadro exterior. </div> </div> </body> </html> estilos.css .recuadrointerior { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } .recuadroexterior { font-family:Courier; font-size:12px; background-color:#ff9900; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('div1i'); addEvent(ob,'click',presionRecuadroInte,false); ob=document.getElementById('div1e'); addEvent(ob,'click',presionRecuadroExte,false); ob=document.getElementById('div2i'); addEvent(ob,'click',presionRecuadroInte,true); ob=document.getElementById('div2e'); addEvent(ob,'click',presionRecuadroExte,true); } function presionRecuadroInte() { alert('se presion el recuadro interior'); } function presionRecuadroExte() { alert('se presion el recuadro exterior');
} function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } Cuando ejecutemos la pgina veremos que cada vez que presionemos el mouse dentro del div interior nos mostrar primero el evento registrado para dicho objeto y luego el evento del div contenedor. Esto sucese para los dos div interiores. Esto debido a que el IE permite solo el burbujeo.
Detener el burbujeo de eventos (IE y DOM)

En muchas situaciones podemos querer que un evento se dispare y no efectue el burbujeo, es decir que no pueda ser capturado por otros elementos de la pgina que lo contengan. Segn de que navegador se trate deberemos indicarselo en la funcin que se dispara al producirse el evento. Si se trata del IE: window.event.cancelBubble=true; Si se trata del FireFox: event.stopPropagation();
<body> <h1>Presione con el mouse en el recuadro interior</h1> <h3>Detencin del burbujeo.</h3> <div id="div1" class="recuadroexterior"> Este es contenido del recuadro exterior. <div id="div2" class="recuadrointerior"> Este es contenido del recuadro interior. </div> Tambin es contenido del recuadro exterior. </div> </body> </html> estilos.css .recuadrointerior { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } .recuadroexterior { font-family:Courier; font-size:12px; background-color:#ff9900; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('div1'); addEvent(ob,'click',presionRecuadroExte,false); ob=document.getElementById('div2'); addEvent(ob,'click',presionRecuadroInte,false); } function presionRecuadroInte(event) { alert('se presion el recuadro interior');
if (window.event) { window.event.cancelBubble=true; } else if (event) { event.stopPropagation(); } } function presionRecuadroExte() { alert('se presion el recuadro exterior'); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Desactivacin del evento por defecto de un elemento HTML (IE y DOM)

Desde JavaScript podemos detectar mediante el evento click la seleccin del hipervnculo y hacer alguna actividad. Si queremos que no se dispare la carga de la pgina debemos hacer: Si se trata del IE: window.event.returnValue=false; Si se trata de un navegador que respeta los estndares: e.preventDefault(); Siendo e el objeto de tipo event que llega como parmetro a la funcin. <body> <a href="http://www.google.com" id="enlace">google</a> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('enlace'); addEvent(ob,'click',presionEnlace,false); } function presionEnlace(e) { if (window.event) { inicializamos la propiedad returnValue con el valor false, luego extraemos la propiedad href del objeto que dispar el evento (en nuestro caso el ancla). Luego con el mtodo open del objeto window abrimos una ventana. window.event.returnValue=false; var url=window.event.srcElement.getAttribute('href'); var ventana=open(url); } else if (e) { inicializamos la propiedad returnValue con el valor false, luego extraemos la propiedad href del objeto que dispar el evento (en nuestro caso el ancla). Luego con el mtodo open del objeto window abrimos una ventana. e.preventDefault(); var url=e.target.getAttribute('href'); var ventana=open(url); } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent)
{ elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Propiedad innerHTML (IE, FireFox)
Seguramente su popularidad se debe a que podemos ahorrar muchas lneas cuando tenemos que crear bloques con gran cantidad de elementos HTML. Esta propiedad crea automticamente todos los elementos HTML y nodos de texto que le indicamos. <body> Ingrese url:<input type="text" id="text1" value="http://www.lavoz.com.ar" size="30"><br> Ingrese url:<input type="text" id="text2" value="http://www.lanacion.com.ar" size="30"><br> <input type="button" value="Crear enlaces" id="boton1"> <h2>Mediante innerHTML</h2> <div id="enlaces1"> </div> <h2>Mediante mtodos propios del DOM</h2> <div id="enlaces2"> </div> </body> </html funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob1=document.getElementById('boton1'); addEvent(ob1,'click',crearEnlaces,false); } function crearEnlaces(e) { //Utilizando el innerHTML var ob1=document.getElementById("enlaces1"); ob1.innerHTML='<a href="'+document.getElementById('text1').value+ '">Enlace 1</a><br>'+'<a href="'+ document.getElementById('text2').value+'">Enlace 2</a>'; //Utilizando los mtodos de DOM unicamente var elemento=document.createElement('a'); var puntero=document.getElementById('enlaces2'); puntero.appendChild(elemento); var nodotexto=document.createTextNode('Enlace 1'); elemento.appendChild(nodotexto); elemento.setAttribute('href',document.getElementById('text1').value); puntero.appendChild(document.createElement('br')); elemento=document.createElement('a'); puntero.appendChild(elemento); nodotexto=document.createTextNode('Enlace 2'); elemento.appendChild(nodotexto); elemento.setAttribute('href',document.getElementById('text2').value); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } Como vemos es muy tentadora esta propiedad: var ob1=document.getElementById("enlaces1"); ob1.innerHTML='<a href="'+document.getElementById('text1').value+ '">Enlace 1</a><br>'+'<a href="'+ document.getElementById('text2').value+'">Enlace 2</a>'; Luego la misma actividad pero utilizando los mtodos estndares tenemos: var elemento=document.createElement('a'); var puntero=document.getElementById('enlaces2');
puntero.appendChild(elemento); var nodotexto=document.createTextNode('Enlace 1'); elemento.appendChild(nodotexto); elemento.setAttribute('href',document.getElementById('text1').value); puntero.appendChild(document.createElement('br')); elemento=document.createElement('a'); puntero.appendChild(elemento); nodotexto=document.createTextNode('Enlace 2'); elemento.appendChild(nodotexto); elemento.setAttribute('href',document.getElementById('text2').value);
Mostrar y ocultar mensaje.

Este algoritmo es bastante sencillo y tiene por objetivo mostrar/ocultar una seccin en una pgina HTML. Inicialmente el mensaje se encuentra oculto y debemos hacer clic en el enlace para mostrarlo. <body> <div class="mensajeoculto" id="mensaje"> Todo este texto permanece oculto hasta que se presiona el enlace de la parte inferior. </div> <a href="#" id="enlace">Mostrar/Ocultar Mensaje.</a> </body> </html> estilos.css .mensajeoculto{ display:none; } .mensajevisible{ color:#aaf; background-color:#ff0; display:block; font-size:30px; width:400px; border:1px solid #00f; padding:5px; } addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('enlace'); addEvent(ob,'click',mostrarOcultarMensaje,false); } function mostrarOcultarMensaje(e) { var ele=document.getElementById('mensaje'); if (ele.className=='mensajeoculto') ele.className='mensajevisible'; else ele.className='mensajeoculto'; }
Mensajes de error en la carga de un formulario.

Una actividad muy comn es la validacin de datos en el cliente mediante JavaScript. <body> <form action="#" method="post"> Nombre de usuario: <input type="text" id="usuario" name="usuario"> <br> Clave: <input type="password" id="clave" name="clave"> <br> <input type="submit" value="Confirmar" id="confirmar"> </form> <div id="error"> </div>
</body> </html> estilos.css #error{ display:none; color:#f00; background-color:#ff0; font-size:15px; width:400px; border:1px solid #00f; padding:5px; } funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('confirmar'); addEvent(ob,'click',validar,false); } function validar(e) { var er=document.getElementById('error'); borra todos los nodos de tipo elemento y de texto que tenga el cuadro de mensajes de error, esto es debido a que si comete varias veces el mismo error los mensajes se acumularan dentro del div: while (er.hasChildNodes()) { er.removeChild(er.lastChild); } var usu=document.getElementById('usuario'); var error=false; if (usu.value=='') { error=true; er.appendChild(document.createTextNode('Debe ingresar el nombre de usuario')); er.appendChild(document.createElement('br')); er.style.display='block'; } var cla=document.getElementById('clave'); if (cla.value=='') { error=true; var er=document.getElementById('error'); er.appendChild(document.createTextNode('Debe ingresar la clave.')); er.style.display='block'; } Luego si hay error desactivamos el evento por defecto para el botn submit: if (error) { if (window.event) window.event.returnValue=false; else e.preventDefault(); } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Mostrar un Tooltip
Recordemos que un Tooltip es un mensaje que aparece sobre un objeto cuando disponemos la flecha del mouse sobre el, este recuadro nos informa el objetivo de dicho control.
<body> <p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" <div class="cuadradito" <div class="cuadradito" <div class="cuadradito" </body> </html>
title="este title="este title="este title="este
es es es es
el el el el
mensaje1"></div> mensaje2"></div> mensaje3"></div> mensaje4"></div>
El cdigo HTML no tiene nada de extrao, salvo inicializar la propiedad title de cada div (ese contenido aparecer en el Tooltip) estilos.css .cuadradito{ background-color: #f00; height: 50px; width: 50px; margin:3px; z-index: -1; } #divmensaje { background-color: yellow; position: absolute; visibility: hidden; padding: 5px; z-index: 100; } Por ltimo el archivo js es: addEvent(window,'load',inicializarEventos,false); function inicializarEventos() {
Primero obtenemos la referencia a todos los div de la pgina:
var vec=document.getElementsByTagName('div');
Definimos las funciones que se disparan para los eventos mouseover, mouseout y mousemove
for(f=0;f<vec.length;f++) { addEvent(vec[f],'mouseover',mostrarToolTip,false); addEvent(vec[f],'mouseout',ocultarToolTip,false); addEvent(vec[f],'mousemove',mostrarToolTip,false); }

Por otro crea un div y lo aade al rbol de objetos, este nos servir para mostrar el mensaje:
var ele=document.createElement('div'); ele.setAttribute('id','divmensaje'); vec=document.getElementsByTagName('body'); vec[0].appendChild(ele); }

obtiene la referencia del div que muestra el mensaje (hasta este momento est oculto) y cambia la propiedad visibility a "visible", luego extrae el contenido de la propiedad title y reubica el div segn la coordenada actual del mouse
function mostrarToolTip(e) { var d = document.getElementById("divmensaje"); d.style.visibility = "visible"; if (window.event) { e=window.event; texto=e.srcElement.getAttribute('title'); } else texto=e.target.getAttribute('title'); d.style.left = e.clientX + document.body.scrollLeft + 15; d.style.top = e.clientY + document.body.scrollTop + 15; if (d.childNodes.length>0) d.firstChild.nodeValue=texto; else { d.appendChild(document.createTextNode(texto)); } } function ocultarToolTip(e) {
var d = document.getElementById("divmensaje"); d.style.visibility = "hidden"; } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Apertura de enlace en la misma pgina o en otra.

Una caracterstica que podemos implementar mediante DHTML es la apertura de un enlace en una nueva ventana. Lo implementaremos de tal manera que el visitante pueda abrir cada enlace de la pgina en la misma ventana o en una nueva. <body> Apertura de enlaces en otra pgina?<input type="checkbox" id="check1"><br> <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</A></li> <li><a href="http://www.clarin.com.ar">El Clarn</A></li> <li><a href="http://www.lavoz.com.ar">La Voz</a></li> </ul> </body> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var enlaces=document.getElementsByTagName('a'); for(f=0;f<enlaces.length;f++) { addEvent(enlaces[f],'click',enlaceSeleccionado,false); } } verificar si el checkbox est seleccionado, en caso negativo no hacemos nada por lo que el sitio se carga en la misma pgina. Si el checkbox est seleccionado obtenemos la referencia del objeto que emiti el evento, desactivamos el evento por defecto para dicho enlace (recordar que esto es distinto para el IE) y abrimos la ventana mediante el mtodo open del objeto window: function enlaceSeleccionado(e) { var check=document.getElementById('check1'); if (check.checked) { var enlace; if (window.event) enlace=window.event.srcElement; else enlace=e.target; if (window.event) window.event.returnValue=false; else e.preventDefault(); window.open(enlace.getAttribute ('href'),'', 'width=800,height=450,toolbar=yes,status=yes,menubar=yes, scrollbars=yes,resizable=yes'); } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Arrastrar y soltar (drag and drop)

Un algoritmo muy interesante es el de arrastrar y soltar objetos. A esto lo podemos implementar capturando los eventos mouseDown, mouseMove, mouseUp. <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html> funciones.js addEvent(window,'load',inicializarEventos,false); function inicializarEventos(e) { Lo primero que hacemos es crear un div en forma dinmica e inicializar sus propiedades: var ob=document.createElement('div'); ob.style.left='0px'; ob.style.top='0px'; ob.style.width='100px'; ob.style.height='100px'; ob.style.background='#ff0'; ob.style.position='relative'; Luego, obtenemos la referencia al body de la pgina y aadimos el div que acabamos de crear: var x=document.getElementsByTagName('body'); x[0].appendChild(ob); Para crear un objeto de la clase Recuadro la sintaxis es la siguiente: var recu1=new Recuadro(ob); } implementaremos una clase que reciba en el parmetro del constructor la referencia del div que le permitir moverse. La clase se llama Recuadro y recibe como referencia el div, define varios atributos para almacenar la coordenada actual del objeto y la diferencia de pixeles entre el punto donde presionamos con el mouse y el comienzo del div. Tambin registramos el evento mouseDown para saber cuando el operador presiona el botn del mouse dentro del div: Recuadro=function(div) { tX=0; tY=0; difX=0; difY=0; addEvent(div,'mousedown',inicioDrag,false);
function coordenadaX(e) { if (window.event) return event.clientX+document.body.scrollTop; else return e.pageX; } function coordenadaY(e) { if (window.event) return event.clientY+document.body.scrollTop; else return e.pageY; } la funcin inicioDrag que se dispara cuando seleccionamos el div, obtiene la coordenada del mouse dentro de la ventana y la posicin actual del div, almacena la diferencia que hay en pxeles entre estos dos valores. Adems registra los eventos mouseMove y mouseUp: function inicioDrag(e) { if (window.event) e=window.event; var eX=coordenadaX(e); var eY=coordenadaY(e); var oX=parseInt(div.style.left); var oY=parseInt(div.style.top); difX=oX-eX; difY=oY-eY; addEvent(document,'mousemove',drag,false); addEvent(document,'mouseup',soltar,false); } La funcin drag se dispara cada vez que mueve la flecha del mouse dentro del div, siempre y cuando se tenga el botn del mouse presionado: function drag(e) { if (window.event) e=window.event; tX=coordenadaY(e)+difY+'px'; tY=coordenadaX(e)+difX+'px'
div.style.top=tX; div.style.left=tY; }
Por ltimo, la funcin soltar se dispara cuando levantamos el dedo del botn del mouse, aqu removemos los eventos mouseMove y mouseUp: function soltar(e) { if (window.event) { document.detachEvent('onmousemove',drag); document.detachEvent('onmouseup',soltar); } else { document.removeEventListener('mousemove',drag,false); document.removeEventListener('mouseup',soltar,false); } } }
Menu desplegable accesible.

<html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> <div id="menu1"> <ul> <li><a href="http://www.google.com.ar">Google</a></li> <li><a href="#">Peridicos >>></a> <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</A></li> <li><a href="http://www.clarin.com.ar">El Clarn</A></li> <li><a href="http://www.lavoz.com.ar">La Voz</a></li> </ul> </li> <li><a href="#">Lenguajes >>></a> <ul> <li><a href="http://www.php.net">PHP</a></li> <li><a href="http://www.rubyonrails.org">Ruby on rails</a></li> <li><a href="http://www.python.org">Python</a></li> </ul> </li> <li><a href="http://www.msn.com">MSN</a></li> </ul> </div> </body> </html>
slo debemos tener en cuenta la sintaxis de las listas HTML y hacer correctamente los anidamientos de listas:
Siempre dispondremos las listas dentro de un div al que le definimos su id. Luego, desde javascript, obtendremos la referencia de dicho id. Tengamos en cuenta tambin que no inicializamos la propiedad href de los hipervnculos que abren submenes. Ahora veamos lo ms importante que es el cdigo javascript que se encarga de ocultar o mostrar los submens. funciones.js
addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { inicializarMenu('menu1');
} function inicializarMenu(m) { La funcin inicializarMenu primero obtiene la referencia del div que contiene el men: var ob=document.getElementById(m); Seguidamente obtenemos un vector con las referencias a todas las marcas html ul: var menu=ob.getElementsByTagName('ul'); la componente cero del vector tiene la referencia al men principal que siempre estar visible, por lo que al for siguiente lo inicializamos en 1 para saltear esta primer componente, luego dentro del for accedemos a la propiedad display y la fijamos con el valor 'none', con esto ocultamos todas las listas (menos la principal): for(f=1;f<menu.length;f++) { menu[f].style.display='none'; } Seguidamente obtenemos un vector con todos los enlaces del men y todos los submenes: var enlaces=ob.getElementsByTagName('a'); Por ltimo, le adjuntamos la funcin a ejecutarse cuando se produzca el evento click a todos los enlaces: for(f=0;f<enlaces.length;f++) { addEvent(enlaces[f],'click',itemSeleccionado,false); } } La funcin itemSeleccionado se dispara para todos las opciones que contiene el men: function itemSeleccionado(e) { Lo primero que hacemos es obtener una referencia en la variable 'enlace' al objeto que emiti el evento, como sabemos el DOM y el IE guardan la referencia en forma distinta: var enlace; if (window.event) enlace=window.event.srcElement; else enlace=e.target; Seguidamente obtenemos una referencia al objeto padre: var padre=enlace.parentNode; obtenemos un vector con todas las listas contenidas en la misma: var ul=padre.getElementsByTagName('ul'); Si no tiene listas contenidas estamos en un nivel de opcin del men sin subopciones, en caso que el vector tenga elementos la propiedad length almacena la cantidad: if (ul.length>0) { Ahora, si el if se verifica verdadero, analizamos la primera componente del vector ul y si tiene el valor 'none' en la propiedad display la cambiamos por block (esto la hace visible), en caso contrario, ocultamos la lista disponiendo el valor 'none': if (ul[0].style.display=='none') ul[0].style.display='block'; else ul[0].style.display='none'; } } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }
Menu desplegable accesible con CSS.

Agregaremos CSS a nuestro men desplegable, con esto lograremos una presentacin adecuada. No modificaremos nada del archivo js, en cambio al archivo html le agregaremos un id para los submenes para permitir mostrarlos de otro color. <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body>
<div id="menu"> <ul> <li><a href="http://www.google.com.ar">Google</a></li> <li><a href="#">Peridicos</a> <ul id="submenu"> <li><a href="http://www.lanacion.com.ar">La Nacin</A></li> <li><a href="http://www.clarin.com.ar">El Clarn</A></li> <li><a href="http://www.lavoz.com.ar">La Voz</a></li> </ul> </li> <li><a href="#">Lenguajes</a> <ul id="submenu"> <li><a href="http://www.php.net">PHP</a></li> <li><a href="http://www.rubyonrails.org">Ruby on rails</a></li> <li><a href="http://www.python.org">Python</a></li> </ul> </li> <li><a href="http://www.msn.com">MSN</a></li> </ul> </div> </body> </html> estilos.css #menu { font-family: Arial; margin:0px; padding:0px; } #menu ul { margin:0px; padding:0px; list-style-type:none; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center; } #menu a:link, #menu a:visited { color: #f00; text-decoration: none; } #menu a:hover { background-color: #369; color: #fff; } #submenu a { display: block; padding: 3px; width: 160px; background-color: #ffa; border-bottom: 1px solid #eee; text-align:center; } #submenu a:link, #submenu a:visited { color: #000; text-decoration: none; } #submenu a:hover { background-color: #369; color: #fff; }

DHTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

DHTML

Загружено:

Авторское право:

Доступные форматы

DHTML (HTML dinmico)

Importancia del DOM (Document Object Model)

Accediendo a una marca HTML a travs del DOM (getElementById)

document.getElementById("nombre del Id de la marca HTML")

<script language="javascript" src="funciones.js" type="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="text/css">

para recuperar una referencia a la marca h1 debemos indicar el siguiente cdigo:

Accediendo a los nodos hijos de una marca HTML(childNodes)(solo Internet Explorer)

Luego para acceder al primer prrafo: y sucesivamente

Accediendo a los nodos hijos de una marca HTML(childNodes)(FireFox)

Accediendo a un nodo de texto de una marca HTML (childNodes - nodeValue)

<h1 id="titulo">Este es el ttulo original</h1>

var tit=document.getElementById('titulo'); tit.childNodes[0].nodeValue='Ahora vemos el nuevo ttulo';

Accediendo a un nodo padre (parentNode)

Accediendo a un nodo hermano (nextSibling y previousSibling)

Otras formas de acceder a los nodos hijos (firstChild - lastChild)

Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)

Accediendo a un conjunto de marcas HTML similares a partir de un Nodo (getElementsByTagName)

function cambiarParrafos() { var obj=document.getElementById("bloque2"); var lista=obj.getElementsByTagName('p'); for(f=0;f<lista.length;f++) { lista[f].childNodes[0].nodeValue=lista[f].childNodes[0].nodeValue + '.'; }

Agregar un nodo de texto (appendChild - createTextNode)

Eliminar un nodo de texto (removeChild)

Crear y agregar un nodo de tipo elemento (createElement - appendChild)

Agregar un nodo de tipo elemento en medio (insertBefore - createElement)

Eliminar un nodo de tipo elemento (removeChild)

Crear un atributo y agregrselo a un nodo de tipo elemento (setAttribute)

Borrar un atributo de un elemento (removeAttribute)

Recuperar un atributo de un elemento (getAttribute)

Mover un nodo de tipo elemento.

Clonacin de un nodo (cloneNode)

Consultar el tipo de nodo (nodeType)

Accediendo al estilo de una marca HTML.

Creacin de controles de tipo input dinmicamente.

Gestin de eventos en JavaScript

Referencia del objeto que gener el evento (this)

Informacin generada en un evento

Eventos onmouseover, onmouseout

Evento onload y onunload

Modelo de eventos del DOM segn la especificacin de W3C.

Evento load (DOM)

Evento click (DOM)

Referencia del objeto que gener el evento (DOM)

Eventos mousedown ,mouseup (DOM)

Evento dblclick (DOM)

Eventos mouseover, mouseout (DOM)

Evento mousemove (DOM)

Modelo de eventos del Internet Explorer (Microsoft) Evento onload(Internet Explorer)

Evento onclick(Internet Explorer)

Referencia del objeto que gener el evento (Internet Explorer)

Haciendo cdigo que funcione en FireFox e Internet Explorer.

Evento click (IE y DOM)

Evento dblclick (IE y DOM)

Eventos mousedown, mouseup(IE y DOM)

Eventos mouseover, mouseout(IE y DOM)

else return false; }

Evento mousemove (IE y DOM)

Evento focus (IE y DOM)

Evento blur (IE y DOM)

function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; }

else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; }

Evento submit (IE y DOM)

Eventos keypress, keydown y keyup (IE y DOM)

Evento change (IE y DOM)

Evento scroll (IE y DOM)

Informacin contenida en el objeto event (IE)

Informacin contenida en el objeto event (DOM)