[SOLUCIONADO] ¿Cómo hacer que el argumento de una función reconozca un evento?

berkeleyPunk · #1 (**permalink**) 17/01/2014, 20:29

Buena noche.

Supongamos que tenemos una función con un argumento, y que esta función la llamamos en el body onload. ¿Cómo le hacemos para que el argumento identifique algún elemento dentro del body al que se le da un clic?

Ejemplo:

Código HTML:

Ver original<div class="x" title="caja_1">  </div>
<div class="x" title="caja_2">  </div>
<div class="x" title="caja_3">  </div>

Código Javascript:

Ver originalfunction miFuncion(title)
{
    if( title == "caja_1" )
    {
        alert("Caja 1");
    }
    else if( title == "caja_2" )
    {
        alert("Caja 2");
    }
    else if( title == "caja_3" )
    {
        alert("Caja 3");
    }
}

Este código funciona perfectamente si añadimos el sig manejador de eventos al HTML: onclick="miFuncion(this.title)"

Ahora, supongamos que no necesitamos lo anterior, sino llamar la función dentro del body onload. ¿Cómo le hacemos para que el argumento de la función reconozca el evento en los divs?

Lo siguiente evidentemente no funciona, pero es una idea de lo que quiero:

Código HTML:

Ver original<body onload='document.getElementsByClassName("x").addEventListener("click", miFuncion(this.title), false)'>

Saludos cordiales

Alexis88 · #2 (**permalink**) 17/01/2014, 21:44

Asigna dinámicamente el evento a los Divs:

Código Javascript:

Ver originalvar divs = document.getElementsByClassName("x"),
    total = divs.length;
 
for (i = 0; i < total; i++){
  (function(indice){
      divs[indice].addEventListener("click", function(){
          alert(this.title);
      }, false);
  })(i);
}

Primero, tomo todos los elementos con la clase "x" y hallo la cantidad que representan. Luego, con ayuda de un bucle For y el método addEventListener, asigno un evento escuchador a cada Div, en donde al producirse un clic en cada uno de ellos, se ejecutará una función en la que se mostrará su título en un mensaje de alerta. Utilizo una función anónima autoejecutable para asignar correctamente el evento y función a cada Div.

Así se ve en ejecución: http://jsbin.com/ESuKoYex/1

Saludos

PHPeros · #3 (**permalink**) 18/01/2014, 06:25

Cita:

Iniciado por Alexis88

Asigna dinámicamente el evento a los Divs

Si tu concepto de "dinámico" es crear un listener para cada elemento, ¡Adelante!

Creo que esto sería lo más adecuado

Alexis88 · #4 (**permalink**) 18/01/2014, 08:43

Dinámico porque se realiza en tiempo de ejecución, pensé que era algo bastante obvio, además, berkeleyPunk no está agrupando los Divs como lo estás haciendo en tu ejemplo. Aunque lo que aconsejas es acertado, ¿qué pasa si no necesita agruparlos?.

Francamente, no he trabajado mucho con la propiedad target, se agradece el aporte.

PHPeros · #5 (**permalink**) 18/01/2014, 12:09

No le va a pasar nada por agruparlos, el documento es claramente suyo y lo puede editar

berkeleyPunk · #6 (**permalink**) 18/01/2014, 12:30

Dos cosas:

1. Gracias por responder, maestro PHPeros. Entonces, según entiendo, el listener está asignado al contenedor, no a los sub-divs. Pero funciona porque el argumento e reconoce con el target el sub-div al que se le ha dado el clic. ¿Así es?

2. Igualmente, gracias por responder, maestro Alexis88 . El código que aportas me es un poco más difícil de entender. A ver si me puedes guiar. Entiendo que el argumento indice de la función anónima tiene la finalidad de reconocer cada div. El problema es que no sé en qué momento le asignas a indice el reconocimiento de un div específico. Si en vez de escribir: divs[indice].addEventListener..., hubieses escrito: divs[i].addEventListener... lo entendería. Pero no lo haces, la variable i la pones solita entre paréntesis al final de todo. Agradecería si me indicaras más puntualmente cómo hay que leer el contenido del for. Cuyo contenido lo divides en 2 partes entrecomilladas. Nunca había visto eso de los paréntesis.

Saludos

Alexis88 · #7 (**permalink**) 18/01/2014, 13:27

Cita:

Iniciado por PHPeros

No le va a pasar nada por agruparlos, el documento es claramente suyo y lo puede editar

Lo decía por el tema de que aplicas el evento click al contenedor de los Divs, pero él los tiene por separado, es decir, no habría un contenedor al cual le aplicara dicho evento y así afecte a sus hijos. Aun así, me gustó tu algoritmo:

Cita:

Iniciado por berkeleyPunk

2. Igualmente, gracias por responder, maestro Alexis88 . El código que aportas me es un poco más difícil de entender. A ver si me puedes guiar. Entiendo que el argumento indice de la función anónima tiene la finalidad de reconocer cada div. El problema es que no sé en qué momento le asignas a indice el reconocimiento de un div específico. Si en vez de escribir: divs[indice].addEventListener..., hubieses escrito: divs[i].addEventListener... lo entendería. Pero no lo haces, la variable i la pones solita entre paréntesis al final de todo. Agradecería si me indicaras más puntualmente cómo hay que leer el contenido del for. Cuyo contenido lo divides en 2 partes entrecomilladas. Nunca había visto eso de los paréntesis.

Esa es una función anónima autoejecutable, la cual permite crear una clausura de una variable (en este caso, el contador i), para poder tomar el valor de i en cada iteración y no se altere en las siguientes, así asignaremos adecuadamente el evento y función a cada Div. Si lo hicieras directamente con el contador i, su valor quedaría fijo y solamente afectaría al elemento cuyo índice corresponda con el último valor dado para i en el bucle. Te sugiero leer el enlace que adjunté para que tengas una idea más clara al respecto.

Saludos

PHPeros · #8 (**permalink**) 18/01/2014, 13:55

Cita:

1. Gracias por responder, maestro PHPeros. Entonces, según entiendo, el listener está asignado al contenedor, no a l sub-divs. Pero funciona porque el argumento e reconoce con el target el sub-div al que se le ha dado el clic. ¿Así es?

Exacto, de hecho, cuando haces click en uno de esos divs también lo estás haciendo al body y todos sus elementos padres.

La funcionalidad de Event.target a grandes rasgos es ver qué elemento ha participado para que se dispare el evento, concretamente. Lo que hago luego es comprobar que tenga el atributo "title" y si es así mostrarlo.

Bueno, me alegra haberte ayudado. Si ya no tienes dudas marca el tema como SOLUCIONADO.

Alexis88 · #9 (**permalink**) 18/01/2014, 14:06

Cita:

Iniciado por PHPeros

La funcionalidad de Event.target a grandes rasgos es ver qué elemento ha participado para que se dispare el evento, concretamente. Lo que hago luego es comprobar que tenga el atributo "title" y si es así mostrarlo.

Si mi memoria no me falla y si estoy en lo correcto, estás aplicando el concepto de la programación orientada a eventos, ¿cierto?. Justo estuve leyendo sobre eso hace un par de semanas.

PHPeros · #10 (**permalink**) 18/01/2014, 14:12

Cita:

Iniciado por Alexis88

Si mi memoria no me falla y si estoy en lo correcto, estás aplicando el concepto de la programación orientada a eventos, ¿cierto?. Justo estuve leyendo sobre eso hace un par de semanas.

Obviously

Tienes mucha info de eso en mdn, como no es de extrañar.

berkeleyPunk · #11 (**permalink**) 18/01/2014, 17:27

Excelente, hoy aprendí más de Javascript.

Gracias y hasta pronto.

berkeleyPunk · #12 (**permalink**) 20/01/2014, 14:45

Cita:

Iniciado por PHPeros

...de hecho, cuando haces click en uno de esos divs también lo estás haciendo al body y todos sus elementos padres...

Espero no hayan perdido el hilo de este post.

Maestro PHPeros. Resulta que metí imágenes dentro del HTML anidado que propones. Resultado: dejó de trabajar el JS.

Por lo que se ve, la etiqueta img tapa u oculta el div en el que está contenida dicha imagen. Pero hasta donde sé, tienes razón cuando afirmas que cuando das clic a un elemento, das, al mismo tiempo, clic a su elemento padre... Entonces, ¿por qué no funciona el script?

Código HTML:

Ver original<div id="contenedor">
  <div class="x" title="caja_1">
    <img src="imagen.png" style="width:100%; height:100%;" />
  </div>
  <div class="x" title="caja_2"></div>
  <div class="x" title="caja_3"></div>
</div>

Se me ocurre poner la imagen como background para evitar el problema. ¿Pero qué tal que uno ya tiene destinado su background para otra cosa?

Alexis88 · #13 (**permalink**) 20/01/2014, 15:53

Así también funciona:

Código Javascript:

Ver originalwindow.addEventListener("click", function(e){
    var n;
    if (!e.target.title.length)
        n = e.target.parentNode.title;   
    else
        n = e.target.title;
 
    return n ? alert(n) : null;
},false);

Si el objeto al que se le dio el clic no tiene un título, se toma el del elemento que lo contiene, sino, el de él.

Saludos

berkeleyPunk · #14 (**permalink**) 20/01/2014, 18:45

Cita:

Iniciado por Alexis88

Así también funciona... Si el objeto al que se le dio el clic no tiene un título, se toma el del elemento que lo contiene, sino, el de él...

Gracias nuevamente maestro Alexis88. Aunque, ciertamente, mi pregunta iba más dirigida a la causa y su posible arreglo desde el HTML y CSS. Porque al parecer el problema es de éstos y no de Javascript. Pero, de cualquier modo, tu código está excelente.

Saludos cordiales y hasta pronto!

Alexis88 · #15 (**permalink**) 20/01/2014, 19:12

Lo que sucede es que el tercer parámetro del método addEventListener, que en este caso es el valor booleano false, evita que se recorran los elementos superiores al que se le dio el clic, aplicando así de manera directa al elemento objetivo y saltándose al resto. Esta es conocida como la fase de captura.

Puedes leer más acerca del tema en el enlace que adjunté más arriba y en los siguientes:

- Delegación y flujo de eventos del DOM
- El flujo de los eventos: Captura y burbuja

Saludos

PHPeros · #16 (**permalink**) 21/01/2014, 08:29

Cita:

Iniciado por Alexis88

el valor booleano false, evita que se recorran los elementos superiores al que se le dio el clic, aplicando así de manera directa al elemento objetivo y saltándose al resto.

Me parece que no estas pillando bien esto de los eventos

Todos los eventos aplicados a los elementos son ejecutados, la diferencia es el orden en que se propagan.

Alexis88 · #17 (**permalink**) 21/01/2014, 09:16

PHPeros, creo que interpretaste mal lo que dije. Con el parámetro false, se salta la fase de captura, por lo que en lugar de seguir la secuencia: body --> div --> img, afectará directamente a img. La fase de propagación o bubbling, es la que se produce después.