Cada marco de JavaScript implementa el manejo de eventos en todos los navegadores, lo que lo alienta a alejarse del antiguo estilo de agregar eventos en línea y utilizar un enfoque lineal optimizado. Eche un vistazo al ejemplo de jQuery en el Listado 6 que utiliza el evento de desplazamiento para resaltar un elemento div.
Listado 6: Adjuntar el evento de desplazamiento usando jQuery
$('#la-caja').hover(función() {
$(this).addClass('resaltado');
}, función() {
$(this).removeClass('resaltado');
});
Este es un evento especial de jQuery y encontrará que proporciona dos funciones. La primera función se llama cuando se activa el evento onMouseOver y la segunda función se llama cuando se activa el evento onMouseOut. Esto se debe a que no existe un evento DOM estándar para el desplazamiento. Veamos un evento más típico como un clic (consulte el Listado 7):
Listado 7: Adjuntar eventos de clic usando jQuery
$('#el-botón').click(función() {
alert('¡Presionaste el botón!');
});
Como puede ver, solo hay un parámetro de función en la instancia. La mayoría de los eventos en jQuery se manejan de la misma manera: utilizando controladores de eventos en jQuery, el contexto se refiere a qué objeto desencadenó el evento. Algunos marcos no funcionan de esta manera. En el caso de Prototype, el código del Listado 7 se parece al Listado 8.
Listado 8: Adjuntar eventos de clic usando Prototype
$('el-botón').observe('clic', función(e) {
alert('¡Presionaste el botón!');
});
Lo primero que notará es que no hay una función de clic, sino una función de observación que acepta un parámetro de evento antes de hacer referencia a sí misma. También notarás que la función acepta un parámetro e, donde el contexto se refiere al elemento que desencadenó el evento. Para ver cómo funciona, reescribamos el código en el Listado 6 usando Prototype (ver Listado 9).
Listado 9: Adjuntar eventos de desplazamiento usando Prototype
$('la-caja').observe('mouseover', función(e) {
var el = Evento.elemento(e);
el.addClassName('resaltado');
});
$('la-caja').observe('mouseout', función(e) {
var el = Evento.elemento(e);
el.removeClassName('resaltado');
});
jQuery también es diferente, solo necesita usar la función $ para obtener las variables de contexto, mientras que la biblioteca Prototype usa la función Event.element(). Además, notó que necesita separar los eventos de mouseover y mouseout.
A través de algunos de los tutoriales de este artículo, puede ver que las funciones se crean en línea y no tienen nombre. Esto significa que no se puede reutilizar y el ejemplo de desplazamiento de Prototype también nos brinda la oportunidad de ver cómo usar funciones con nombre. El Listado 10 ilustra este método.
Listado 10: Mejorando los eventos de desplazamiento usando Prototype
Notarás que en este punto solo necesitas definir una función. Se llama mediante eventos de mouseover y mouseout. Esta función determina si un elemento tiene un nombre de clase "resaltado" y lo agrega o elimina según el resultado. También notarás que el parámetro e se pasa implícitamente. En otras palabras, pasaste un argumento ambiguo a la función de observación.
Dirección de reimpresión: http://www.denisdeng.com/?p=720
Dirección original: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
función alternarclase(e) {
var el = Evento.elemento(e);
if(el.hasClassName('resaltado'))
fila.removeClassName('resaltado');
demás
fila.addClassName('resaltado');
}
$('la-caja').observe('mouseover', toggleClass);
$('la-caja').observe('mouseout', toggleClass);