Hola, Fernand0!
La asignación de los eventos con addEventListener y attachEvent (el primero es el correcto, el segundo es el que usa Explorer) se fundamenta principalmente en que implementándolas se pueden construir más o menos fácilmente funciones de registro que ayudan a prevenir problemas de memoria en Explorer (supuestamente al cerrar una página, la memoria debería ser liberada, pero Explorer -dicen que en la versión 7 está corregido este problema, pero no lo comprobé- tiene problemas para liberarla cuando se producen referencias circulares entre lo que llaman el mundo DOM (que en explorer se maneja con objetos COM) y el mundo de los objetos Javascript; entonces, para prevenir esos problemas, se va guardando un registro eventos y manejadores y luego, cuando se descarga la página, se llama a una función que recorre ese registro y desasigna los eventos -rompiendo las referencias circulares que tienen que ver con la asignación de eventos- para que Explorer pueda liberar la memoria.
En el ejemplo, podés ver cómo funciona esto que mencioné arriba. Hay otros patrones de fugas de momoria en Explorer, más allá del de los eventos, que quizá te convendría investigar (propiedades expando, closures, onreadystatechange en ajax, el orden de creación de elementos DOM anidados, en fin, es un tema largo.)
En cuanto a tu consulta de cómo saber sobre qué objeto estoy, fijate que en el ejemplo referencio al objeto en función al objeto event (también acá explorer lo hace de manera distinta al resto).
Sobre eventos/asignación, podés leer estos enlaces:
http://kusor.net/traducciones/brainj...vents1.es.html http://ajaxcookbook.org/event-handling-memory-leaks/ http://ajaxcookbook.org/canceling-an...rowser-events/
Sobre fugas de memoria en explorer podés leer estos enlaces:
http://www.bazon.net/mishoo/articles.epl?art_id=824 http://msdn.microsoft.com/en-us/library/bb250448.aspx http://www.hedgerwow.com/360/dhtml/ie6_memory_leak_fix/ Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
var EvRegister=[];
function addEvent(obj, evType, fn, useCapture){
if(obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evType, fn);
}else{
obj['on'+evType]=fn;
}
var ev={_obj:obj,_evType:evType,_fn:fn,_useCapture:useCapture};
EvRegister.push(ev);
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
} else if (obj.detachEvent){
obj.detachEvent("on"+evType, fn);
} else {
obj['on'+evType]=function(){};
}
var i,l;
for ( i= 0, l=EvRegister.length; i < l ; i++) {
if (EvRegister[i]._evType== evType && EvRegister[i]._obj==obj && EvRegister[i]._fn==fn && EvRegister[i]._useCapture==useCapture) {
EvRegister.splice(i, 1);
break;
}
}
}
function unregisterAllEvents() {
while (EvRegister.length > 0) {
removeEvent(EvRegister[0]._obj,EvRegister[0]._evType,EvRegister[0]._fn,EvRegister[0]._useCapture);
}
}
function $(id){return document.getElementById(id);}
function ubicar(e){
var e=e || window.event;
var obj=e.target || e.srcElement;
obj.style.cursor='pointer';
var anterior=obj.previousSibling && obj.previousSibling.nodeName.toLowerCase()=='li'? obj.previousSibling.innerHTML:'no hay anterior';
var siguiente=obj.nextSibling && obj.nextSibling.nodeName.toLowerCase()=='li'? obj.nextSibling.innerHTML:'no hay siguiente';
$('log').innerHTML='Estamos sobre: '+obj.innerHTML+'<br />El anterior es: '+anterior+'<br />El siguiente es: '+siguiente;
}
function desubicar(){
$('log').innerHTML='';
}
function inicio(){
var el=$('pp').getElementsByTagName('li');
for(var i=0, l=el.length;i<l;i++){
addEvent(el[i], 'mouseover', ubicar, false);
addEvent(el[i], 'mouseout', desubicar, false);
}
}
window.onload=inicio;
window.onunload=unregisterAllEvents;
</script>
</head>
<body>
<ul id="pp"><li>uno</li><li>dos</li><li>tres</li><li>cuatro</li></ul>
<div id="log"></div>
</body>
</html>