Eventos
Hay una infinidad de maneras de asignar eventos a los elementos de una página web:
- Clásica
- Código:
<body onload="foo()">
- Inconvenientes: obliga a modificar el HTML de toooooodas las páginas y toooooodos los elementos donde
queremos usar el script. Añadir varios eventos al mismo objeto es un desmadre.
- Modernista
- Código:
window.onload=foo
- Inconvenientes: al añadir un evento machacamos todos los anteriores.
- Utópica
- Código:
addEventListener()
y attachEvent()
- Inconvenientes: cada navegador los implementa a su manera, o de ninguna en absoluto.
- Geek
- Código:
addEvent()
- Inconvenientes: falla en algunos navegadores y provoca efectos colaterales difíciles de apreciar a primera
vista.
¿La solución?
Dean Edwards nos propone el siguiente código casero (sólo
he agregado los comentarios en español):
function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
};
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
};
Según nos explica el autor (hay más) funciona en miles de
navegadores y no encoge la ropa.
¿Qué eventos podemos manejar?
Un laborioso programador holandés llamado Peter-Paul Koch ha recopiado una lista de eventos en los navegadores
más populares. El mismo sitio web contiene información sobre el tema para tomar y dejar.
