en que parte del objeto estoy?

Fernand0 · #1 (**permalink**) 14/08/2008, 12:45

Wenas.. yo molestando otra vez..

Queria saber simplemente eso.. estoy haciendo un menu y necesito saber como "situarme" en determinado ul/li que este debajo del mouse.. no simplemente en TODO el ID..

y otra cosa (espero no abuzar)..

Código:

objeto.onmouseover=blablabla..;

y si despues le pongo

Código:

objeto.onmouseover='';

gasta recursos o algo? o se puede hacer tranquilamente? (pregunto porque para algo esta el addEventListener.. creo yo

)

saludos

buzu · #2 (**permalink**) 14/08/2008, 17:18

al principio asignas una funcion al evento onmouseover de un elemento en html y luego con la segunda opcion borras o des-asignas ese evento.

Fernand0 · #3 (**permalink**) 14/08/2008, 20:11

Si pero como me situo en el LI que esta debajo del mouse?

Solo puedo obtener el ID de TODA la lista... no el ID del LI que este debajo del mouse ni sus childNodes (puedo obtener TODOS los childNodes... pero no SOLAMENTE los childNodes del LI que esta en ese momento debajo del mouse)..

Panino5001 · #4 (**permalink**) 14/08/2008, 22:07

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>

buzu · #5 (**permalink**) 14/08/2008, 22:20

El problema es que estas asignando el evento a la lista. Asignalo a cada li, puedes hacerlo con un bucle. Despues puedes pasar una referencia al objeto que activo el evento algo como:

li.onmouseover = function(){
alert(this);
}

Ahora que si quisieras hacer una referencia a la funcion asignada al evento en lugar de el elemento que activa el evento la cosa seria mas canija, pero tambien se puede...

Fernand0 · #6 (**permalink**) 15/08/2008, 01:53

Código PHP:

      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);

    }

Código PHP:

  li.onmouseover = function(){

alert(this);

}

Entiendo entonces le aplico los eventos a los LI en vez de a el UL completo(pense que se podia obtener de alguna forma sensilla el ID del LI desde el UL en evento) y ahi cada LI ve sus propios childNodes...

Muchas gracias buzu y Panino5001

Panino5001 gracias por la explicacion..
Cuando mi cerebro recupere la funcionalidad me pondre a leer... aunque no es lo mio la "teoria".. pero si sirve a la hora de tener un buen sitio... bienvenido sea

derkenuke · #7 (**permalink**) 15/08/2008, 08:01

Bueno, yo creo que puede ser sencillo poniendo el evento al elemento UL también. Fíjate en la solución de Panino, está todo ahí.

Aunque es más correcto su ejemplo, te escribo uno más simplificado y más fácil de dijerir. La clave está en la obtención de la variable obj en ubicar():

Código PHP:

  <script type="text/javascript">

<!--

 
// document.getElementById abreviado

function $(x) { return document.getElementById(x); }

 
// sobre el UL

function ubicar(evt){

    var evt = evt || window.event;

    var obj = evt.target || evt.srcElement;

    $("info").innerHTML = "Estás sobre "+(obj.innerHTML);

}

 
// fuera del UL

function desubicar() {

    $("info").innerHTML = "No estás sobre ninguno.";

}

 
// -->

</script>

 
 
<ul id="pp" onmouseover="ubicar(event)" onmouseout="desubicar()">

    <li>uno</li>

    <li>dos</li>

    <li>tres</li>

    <li>cuatro</li>

</ul> 

<div id="info"></div>

Saludos

Fernand0 · #8 (**permalink**) 15/08/2008, 17:43

gracias a todos.. me sirvio mucho todo ^^