Haz tu web compatible con Firefox (II)

Ver artículo anterior Haz tu web...

---

Eventos

---

La forma tradicional de asignar funcionalidad a los eventos de los objetos es mediante los parámetros de las etiquetas del documento:

<input id="myOb" onblur="myFunc2()" onfocus="myFunc1()" type="text">

Otra forma, es mediante la utilización de un lenguaje interpretado como Javascript, accediendo a las propiedades del objeto:

document.getElementById(“myOb”).onfocus = myFunc1;
document.getElementById(“myOb”).onfocus = myFunc2;

Y, por último, hay otra forma que es utilizado los métodos que provee el DOM, que para Explorer es attachEvent y en Firefox es addEventListener, que toma un parámetro más que en IE al que debemos completar con false.

Lea el resto del artículo haciendo clic aquí

Además de estas diferencias, en el método de Explorer debe agregarse la palabra on delante del nombre del evento (ej. onmouseover). Siguiendo con el ejemplo anterior

En Explorer:

 document.getElementById(“myOb”).attachEvent(“onfocus”, myFunc1);

En Firefox:

 document.getElementById(“myOb”).addEventListener(“focus”, myFunc1);

En este mismo blog encontrarán una pequeña función que será de gran utilidad a la hora de asignar o quitar eventos.

Cuando se produce el evento, la función de usuario asignada recibe como parámetro el objeto event. Pero esto no sucedía en versiones anteriores de Explorer, ya que el objeto event no cumplía con el estándar y fue ubicado como un objeto de window, lo que lo hacía público. Entonces se debe utilizar el siguiente truco para asegurarnos que la función ha recibido el objeto event

function myFunc1(ev) {
   ev =  ev ¦¦ window.event;
}

El objeto event tiene una serie de propiedades y métodos que Explorer implementa pero sin respetar el estándar, en algunos casos reemplazando propiedades por métodos. Veamos el siguiente cuadro:

En Explorer	Descripción	En Firefox
srcElement	Elemento que produjo el evento	target, pero en Firefox los nodos de tipo texto también pueden producir eventos, por lo que usted debe subir de nivel hasta encontrar la etiqueta “padre” del nodo texto utilizando este código: var node = ev.target; while(node.nodeType !=node.ELEMENT_NODE)    node = node.parentNode;
fromElement	Elemento que esta perdiendo la activación	target si el evento es onmouseout, relatedTarget si el evento es onmouseover
toElement	Elemento que está siendo activado	relatedTarget si el evento es onmouseout, target si el evento es onmouseover.
cancelBubble	Asignando true a esta propiedad se evita que el evento se siga propagando hacia arriba en el árbol del DOM.	Debe ser invocado el método stopPropagation()
returnValue	Cuando se le asigna false, Explorer las acciones por omisión del evento.	Debe ser invocado el método preventDefault()
offsetX, offsetY	Posición donde se generó el evento con respecto al elemento que lo generó.	Si el puntero estaba sobre un elemento posicionado en forma absoluta, fija o relativa, se puede usar layerX y layerY (que no son estándar). Sin embargo si se trata de un elemento estático la única forma de obtener estas propiedades es mediante el cálculo manual, atravesando todo la jerarquía del documento hasta su tope sumando los valores offsetLeft/offsetTop. Por ejemplo: function offsetLeft(myElement) {   var _xPos = myElement.offsetLeft   var _tempEl = myElement.offsetParent   while ( _tempEl != null )   {     _xPos += _tempEl.offsetLeft     _tempEl = _tempEl.offsetParent   }   return _xPos }
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)	Retorna la coordenada vertical del evento relativo a la página	pageY Esta propiedad toma en cuenta la barra de desplazamiento vertical de la página. No es parte del DOM estándar.
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)	Retorna la coordenada horizontal del evento relativo a la página	pageX Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página. No es parte del DOM estándar.