javascript - español - addeventlistener load

addEventListener a un elemento, con el elemento mismo como parámetro

Question

Antes que nada, perdón si el título no es el mejor, no pude encontrar uno mejor.

¿Cómo puedo establecer una función como clickEvent for a Div usando javascript y, al mismo tiempo, también configurar el parámetro de la función, para que sea la Div misma?
Por ejemplo:

Tengo un archivo HTML que tiene:

<span id=''parent''>
    <div class=''child''></div>
</span>

Y un archivo JS donde tengo el siguiente código:

var el = document.getElementById("parent").getElementsByClassName("child")[0];
el.onclick = someFuntion(this);

Pero lo que pasa es que quiero que this parámetro se refiera al div.child , de modo que cuando haga clic en Div, se pase como un parámetro, como un elemento DOM, lo que me permita usarlo dentro de someFuntion(element) al igual que cualquier otro elemento DOM: element#id , por ejemplo.

Soluciones probadas:

el.addEventListener("click", someFuntion(event), false);
el.addEventListener("click", someFuntion(this), false);
el.addEventListener("click", someFuntion(el), false);
$("#parent #child").bind("click", someFuntion(this));
el.onclick = someFuntion(divIntoSpan);

SOLUCIÓN:
el.onclick = someFuntion;

function someFunction(e){
    if(e.target){
        //remember to use "e.target" from here on, instead of only "e"
        //e.id (error: undefined); e.target.id (correct)
    }
}

Answer 1

si, por alguna razón, debes hacerlo de la manera que quieras

el.addEventListener(''click'', function(e) { 
    someFunction(e.target);
}, false);

pero la respuesta preferida de Jan Turoň es la preferida

Answer 2

Solución

Solo haga el.addEventListener("click", someFunction); <- no someFunction()

y luego usa event.target

function someFunction(e) {
   if(e.target) ...
}

Solución alternativa

Si te gusta la solución de @JaromandaX, puedes simplificarlo

el.addEventListener("click",someFunction.bind(null,el));

Tenga en cuenta que enlace devuelve la función. Este ejemplo debería aclararlo:

function someFunction(el) {
  // if used with bind below, the results are:
  console.log(this); // "This is it!"
  console.log(el); // the clicked element
}

a.addEventListener("click",someFunction.bind("This is it!",a));

Consejo

• someFunction es la función misma
• someFunction() es lo que devuelve la función

Si quieres ser un buen codificador, no deberías estar satisfecho con ¡Funciona! . Vale la pena pasar un tiempo para descubrir por qué funciona. Sin este paso, no puede estar seguro si su código no contiene errores ocultos en algunos casos.

Lo que tienes en Solutions intentado es Programación por permutación, que es un antipatrón. Recomiendo leer este gran artículo de wiki sobre antipatterns .