The Dynamic Duo - The Dynamic Layer Object API [Utilizando Eventos Basados- en Capas]

Utilizando Eventos Basados- en Capas

Pre-requisitos: Debes de leer la lección Documento Mouse Eventos antes de leer esta.

Utilizando la propiedad elm tu puedes definir los eventos para tus capas como onMouseOver, onMouseOut, onMouseDown, onMouseUp, onMouseMove, y onClick.

En Netscape puedes marcar el controlador de eventos como haces con una ancla:

<DIV ID="divName" onMouseDown="/*your code*/"></DIV>

También puedes definir los controladores de eventos directamente utilizando JavaScript. Para Netscape utilizas:

document.layer[id].captureEvents(Event.MOUSEDOWN)
document.layer[id].onmouseover = downHandler

Para IE:

document.all[id].onmouseover = downHandler

Para una solución cross-browser puedes definir los controladores de eventos utilizando la propiedad DynLayer elm (La cual apunta al elemento actual y no a las propiedades CSS):

objectName.elm.onmousedown = layerDownHandler
objectName.elm.onmouseup = layerUpHandler
objectName.elm.onmouseover = layerOverHandler
objectName.elm.onmouseout = layerOutHandler
objectName.elm.onmousemove = layerMoveHandler
objectName.elm.onclick = layerClickHandler
if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE)

Tienes que definir todos los eventos del ratón utilizando minúsculas. El nombre del controlador puede ser lo que desees escoger.

Para Netscape tienes que manualmente capturar los eventos que vas a utilizar. Puedes utilizar en la línea captureEvents como fijarlos. Si no necesitas uno de ellos solamente remuévalo del comando. No necesitas capturar a los eventos mouseOver y mouseOut como aparece que estos son capturados por default.

Otra forma para definir tus controladores es utilizando el comando new Function(). Haciéndolo de esta forma puedes pasar los parámetros facilmente.

objectName.elm.onmousedown = new Function("layerDownHandler('my string!')")
if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN)

function layerDownHandler(string) {
	status = string
}

Hay otra forma para pasar los parámetros, puedes temporalmente definir sub-propiedades al evento de propiedades dynlayer, y recogerlos en la función de controlar:

objectName.elm.string = "my string!"
objectName.elm.onmousedown = layerDownHandler
if (is.ns) objectName.elm.captureEvents(Event.MOUSEDOWN)

function layerDownHandler() {
	status = this.string
}

Utilizando los Controladores del Ratón

En las funciones del controlador puedes recoger la localización del ratón con usar los siguientes comandos:

var x = (is.ns)? e.layerX:event.offsetX
var y = (is.ns)? e.layerY:event.offsetY

Los variables x y y pueden ser entonces utilizados donde desees. Por ejemplo, aquí hay un código el cual mostrara la localización del ratón cuando se encuentra encima de una capa:

function init() {
	mylayer = new DynLayer("mylayerDiv")
	mylayer.elm.onmousemove = layerMoveHandler
	if (is.ns) mylayer.elm.captureEvents(Event.MOUSEMOVE)
}

function layerMoveHandler(e) {
	var x = (is.ns)? e.layerX:event.offsetX
	var y = (is.ns)? e.layerY:event.offsetY
	status = x+","+y
}

Ejemplo: dynlayer-mouseevents1.html [fuente]

El Objeto Dynamico API