Ayudita con DOM EVENTS :)

[Computer XTress]

Hola!

Tengo una página que genera por php una serie de elementos a los cuales le quiero asignar eventos desde un JS separado. Este es mi ejemplo:

Código HTML:

<ul>
  <li id="item_1">Autos</li>
  <li id="item_1_data">
    Ford - Chevrolette - Ferrari
  </li>

  <li id="item_2">Verduras</li>
  <li id="item_2_data">
    Papa - Zanahoria - Tomate
  </li>
</ul> 

El PHP generará la lista colocando el numero de item (id="item_1") correspondiente. Para cada item, habrá un string con contenidos (id="item_1_data")

El evento sería, al hacer click sobre AUTOS ó VERDURAS se muestra / oculta el LI de abajo (por ejemplo, id="item_1_data")


La forma en que aprendí a aplicar los eventos desde afuera es esta:

Código HTML:

	function addListener(Obj, event, eventHandler) {
		// 
		if( Obj.addEventListener ) {
			Obj.addEventListener(event, eventHandler, false);
	        } else if( Obj.attachEvent ) {
			Obj.attachEvent("on"+event, eventHandler);
		}
	}

Esta funcion sería a prueba de Firefox e IE... ahora bien, vamos al PROBLEMA:

Yo tengo una funcion que se llama switchDisplay(Obj). Chequea que el ELEMENTO pasado (Obj) tenga display: none; caso positivo lo pasa a BLOCK, casi negativo lo pasa a NONE.

Si yo hago switchDisplay(document.getElementById("item_1_data ")); la función muestra ó oculta el elemento con ID "item_1_data".

[Si, se que tiene que tener <element style="display: xxx;">]

En otras palabras, NECESITO mandarle a la funcion de forma dinamica un ID de elemento... que puede ser cualquier numero, lo genera el PHP.

Ahora bien, la funcion AddListener() espera como eventHandler NO una función, sino el nombre de la función sin atributos...

EJ:

addListener(document.getElementById("item_1"), "click", switchDisplay(document.getElementById("item_1_data ")) );

Cuando lo que en realidad debería ser algo asi:

addListener(document.getElementById("item_1"), "click", switchDisplay());


¿Cómo puedo asignar eventos a elementos cuyos ID son dinámicos?

Muchas gracias por su orientación!!!

[derkenuke]

La verdad es que te has explicado muy bien Computer XTress, se entiende tu problema perfectamente. Otra cosa que es de agradecer es que no se vea código PHP, sólo su generación .



Lo que yo haría en tu caso: Ya que la generación es en PHP, lo lógico es que almacenes en un array todos los ID's generados. Es decir, si has generado como en tu ejemplo:

Código PHP:

  <ul>
  <li id="item_1">Autos</li>
  <li id="item_1_data">
    Ford - Chevrolette - Ferrari
  </li>
 
  <li id="item_2">Verduras</li>
  <li id="item_2_data">
    Papa - Zanahoria - Tomate
  </li>
</ul> 
   

Deberías generar también un array en PHP (o en javascript, eso como quieras, las dos formas serán posibles) con los ids de tus elementos, o al menos su cardinalidad. Es decir, deberíamos tener al final de la generación:

Código PHP:

  var misIDS = ["item_1", "item_2"];
// ó si no en PHP
$misIDS = ["item_1", "item_2"];
// ó si no
var numero_items_max = 2;
// ó su variante PHP
$numero_items_max = 2; 
   

Después ya nos encargaríamos de hacer las correspondientes llamadas:

Código PHP:

  addListener(document.getElementById(elID), "click", switchDisplay );
// ó
addListener(document.getElementById("item_XX"), "click", switchDisplay ); 
   

Hagas lo que hagas tienes que tener en cuenta que switchDisplay será un manejador de eventos, y que el único parámetro que aceptará es el de evento (e, o como quieras llamarlo) para navegadores como Firefox.

Luego, en switchDisplay, en vez de tu parámetro, el objeto con el que deberemos jugar será this, lanzador y receptor de todo el evento onclick. Y si necesitas el elemento con id item_2_data por ejemplo, es lógico que el this en ese momento referencie a item_2, luego this.id será "item_2", y this.id+"_data" será la cadena item_2_data.




Espero que me hayas entendido.

Un saludo.

[Computer XTress]

Hola Derkenuke, gracias por tu respuesta!

Funcionó perfectamente... IMPECABLE!

Es decir que el sistema automaticamente relaciona la función como un handler del evento asignado al elemento y por eso puedo usar "this" ! Todo tiene sentido ahora :)

Aprovecho para preguntarte... mi función handler tiene que tener SI o SI pasado como parámetro el "e" o "event" ? por ejemplo:

Código HTML:

function switch(e) {
   ...
}

Justamente NO lo hice así y funcionó igual. Pero estuve jugando también con eventos del mouse y posicionamiento del puntero y en todos los casos que vi declaraban la función con (e) / (event).


Un saludo atento y MUCHISIMAS gracias por tu ayuda! :)

[derkenuke]

El objeto que pasas por argumento (llamado e en este caso, pero puede llamarse como quieras) es el equivalente a window.event de IE.

Normalmente en estos casos en los que puedes solventar el asunto entero con el objeto this no hay problema, no es necesario ni obligatorio que yo sepa.

Pero existen unos parámetros y unos métodos de e o de window.event que no se podrían hallar de otro modo. Por ejemplo las coordenadas del ratón en onmousemove, la tecla pulsada en onkeypress, el botón del ratón en onclick... es decir, información del propio evento. También nos da información en un onmouseover de desde dónde se viene el ratón y sobre qué hemos entrado...

En definitiva, información relacionada con el evento en sí.

Para el ejemplo que nos ocupa, parece que podemos omitir su utilización.



Un saludo.

[Computer XTress]

Gracias nuevamente Derkenuke. Ahora voy a buscar algo de data en la red al respecto así amplío un poco.

Un saludo atento!

Eduardo

[Computer XTress]

UH ! OH ! No me había dado cuenta antes.... pero "this" no funciona en Internet Explorer...

Si hago un "alert(this)" me dice "[Object]" .. lo cual está bien. Pero no me deja acceder a sus propiedades..., me dice que son "undefined" ! Maldito IE 6 ! Todavía no lo pude probar con el 7...

Aviso nomás... ahora a buscar en la web a ver si encuentro una alternativa!

saludos

[Panino5001]

Fijate así:

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>Documento sin t&iacute;tulo</title>
<script>
function addListener(Obj, event, eventHandler) {
        // 
        if( Obj.addEventListener ) {
            Obj.addEventListener(event, eventHandler, false);
            } else if( Obj.attachEvent ) {
            Obj.attachEvent("on"+event, eventHandler);
        }
    }
    function switchDisplay(event){
    if(window.event)
        alert(window.event.srcElement.id)
    else{
        alert(event.target.id)
    }
    }
    
</script>
</head>
 
<body onload="addListener(document.getElementById('item_1'), 'click', switchDisplay);">
<ul>
  <li id="item_1">Autos</li>
  <li id="item_1_data">
    Ford - Chevrolette - Ferrari
  </li>
 
  <li id="item_2">Verduras</li>
  <li id="item_2_data">
    Papa - Zanahoria - Tomate
  </li>
</ul> 
</body>
</html> 
  

[Computer XTress]

Si señor! eso mismo era.

Encontré más data aquí:
http://www.quirksmode.org/js/events_advanced.html


Y así lo solucioné... primero cargo en una variable CUAL es el objeto por el cual accedo a los eventos... miren qué práctica esta forma:

Código:

var ev = e || window.event;

el || dice que 'ev' va a valer 'e' o 'window.event'... la que funcione :)

luego, la función handler recibirá NECESARIAMENTE el objeto manipulador de eventos (que lo tengo en 'ev')...

Código:

function handlerDeMiEvento(ev) {
. ....
}

y dentro de mi handler, simplemente accedo al TARGET ó SOURCE... esto me da acceso al elemento al cual se le aplicó el evento:

Código:

function handlerDeMiEvento(ev) {
    src = e.srcElement || e.target;
    alert(src.id);
}

Y listo! Sensacionalllllllll !! como ponerle dulce de leche al budín de pan !! (bueno, no se si tan bueno, pero funciona :))


Gracias a todos por su ayuda :)

Edu