DOMLib

Tutorial.Escuchadores de eventos

Este tutorial explica como añadir escuchadores de eventos (eventlisteners) a sus capas, y hacerlas reaccionar a ciertos eventos del ratón. Antés de continuar, asegurese de haver leido el primer tutorial sobre como crear capas.

¡Escuchame!

Creo que este será un tutorial bien corto, ya que no hay mucho que hacer para trabajar con escuchadores de eventos. Los escuchadores de eventos pueden ser insertados mediante la siguiente sintaxis:

DomElement.addEventListener(event,function,capture)

Donde los parámetros son utilizados para:

Event; Este especifica el tipo de evento que debe capturar en forma de un valor de tipo cadena. Algunos de los eventos son:

mousemove; Se activa cuando el ratón se mueve sobre la capa.
mouseover; Se activa cuando el ratón entra el área de la capa (es decir, la capa obtiene el foco)
mouseout; Se activa cuando el ratón se mueve fuera del área de la capa (es decir, la capa pierde el foco)
mousedown; Se activa cuando se pulsa un botón del ratón sobre la capa.
mouseup; Se activa cuando un botón del ratón se suelta (se deja de pulsar) sobre la capa.

function; La función a ejecutar cuando se lanza el evento.
capture; Esto solo se utiliza para navegadores DOM, y especifica si el escuchador debe ejecutar el evento en la fase de captura (viajando hacia su objetivo). En la mayoría de los casos querremos que el valor de esta propiedad sea false, y recordad que este parámetro no hace nada para navegadores IE5+.

Tomemos el ejemplo anterior "creando capas", y añadámosle escuchadores de evento para nuestra capa:

<html>
<head>
<script language="Javascript" src="../src/dhtmlapi.js"></script>

<script language="Javascript">

onload=function() { 
	myLayer=new DomElement('myLayer','myStyle')
	document.body.appendChild(myLayer.elm)

	myLayer.addEventListener('mousedown',handlemousedown,false)
	myLayer.addEventListener('mouseup',handlemouseup,false)
	myLayer.addEventListener('mousemove',handlemousemove,false)
	myLayer.addEventListener('mouseout',handlemouseout,false)

}

function handlemousedown(e) { myLayer.style.backgroundColor='#ffee00' }
function handlemouseup(e) { myLayer.style.backgroundColor='#ffffff' }
function handlemousemove(e) { myLayer.style.backgroundColor='#ffffff' }
function handlemouseout(e) { myLayer.style.backgroundColor='#c0c0c0' }

</script>

<style type="text/css">
.myStyle {	
	left:200px;
	top:200px;
	width:100px;
	height:100px;
	border:1px solid;
	background-color: #c0c0c0;
	position:absolute;
}
</style>
</head>
<body>
</body>
</html>

Tal como puede ver, hemos añadido cuatro escuchadores de eventos para diferentes eventos del ratón al objeto myLayer, y estos escuchadores de eventos se direccionan a las cuatro funciones declaradas en la siguiente parte del código.

En las funciones de manejo de eventos nosotros simplemente cambiamos el estílo de la propiedad backgroundColor de la capa para visualizar la acción de los movimientos del ratón.

Notas finales

Hay algunas cosas extra a considerar cuando se crean objetos más avanzados y se añaden escuchadores de eventos, y para código más avanzado, mire los ejemplos de botón (button) y ventana (window) proporcionados con el paquete de la DOMLib. Espero que esto os ofrezca una bonita forma de iniciaros en el uso de capas y escuchadores de eventos.