Propiedad Evento

Utilizando la propiedad evento podrás definir eventos para tu capa como onMouseOver, onMouseOut, onMouseDown, onMouseUp, y onMouseMove.

En Netscape no puedes marcar los controladores de evento como puedes hacer con un ancla (anchor):

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

Como sea, puedes definir los controladores 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 con utilizar la propiedad evento DynLayer (el cual apunta al elemento actual en lugar de a las propiedades de CSS):

if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE)
objectName.event.onmousedown = downHandler
objectName.event.onmouseup = upHandler
objectName.event.onmouseover = overHandler
objectName.event.onmouseout = outHandler
objectName.event.onmousemove = moveHandler

Estés seguro de definir los eventos de ratón utilizando todo en minúsculas. El nombre controlador puede ser cualquier cosa.

Para Netscape tendrás que capturar los eventos que desees utilizar manualmente. Lo puedes ver en el capturarEventos (captureEvents) línea de como fijar estos. Si no necesitaras uno de ellos solamente remuévelo del comando. No tienes que capturar a los eventos mouseOver y mouseOut como aparece ya que estos son capturados de todas maneras (default).

Otra forma de definir tus controladores es utilizando new Function() comando nueva función. Haciendo esto de esta forma puedes pasar los parámetros fácilmente.

if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN)
objectName.event.onmousedown = new Function("downHandler('my string!')")

function downHandler(string) {
	status = string
}

Hay otra forma de pasar los parámetros, puedes temporalmente definir sub-propiedades al propiedad evento dynlayer  y recuperar estos en la función del controlador:

if (ns4) objectName.event.captureEvents(Event.MOUSEDOWN)
objectName.event.string = "my string!"
objectName.event.onmousedown = downHandler

function downHandler() {
	status = this.string
}

Ver dynlayer-event1.html para un ejemplo del controlador mouseDown.

Ver dynlayer-event2.html Para cada evento excepto mouseMove (ver abajo el ejemplo para mouseMove).

Utilizando cordinadores del raton (Mouse Coordinates)

En la función del controlador puedes recuperar la localización del ratón al utilizar los comandos siguientes:

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

Los variables X y Y pueden entonces ser utilizados para hacer cualquier cosa que desees. Por ejemplo, aquí hay un código que mostrará la localización del ratón mientras esta encima de la capa:

function init() {
	mylayer = new DynLayer("mylayerDiv")
	if (ns4) mylayer.event.captureEvents(Event.MOUSEMOVE)
	mylayer.event.onmousemove = mouseMoveHandler
}

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

Ver dynlayer-event3.html para un ejemplo mouseMove.

Para una explicación mas completa de los eventos del ratón leé la lección Drag and Drop Concetos.

El Dynamic Layer Object API

Casa Próxima Lección: Las Extensiones DynLayer
copyright 1998 Dan Steinman