2

Ya estuve leyendo al respecto y encontré el siguiente código:

var formulario = document.getElementById("miForm");
formulario.addEventListener("submit", llamar);

function llamar(e) {
  e.preventDefault();
  alert("Presionado");
}

Al parecer dentro de los parámetros de addEventListener(), si el nombre de la función va con paréntesis es como estarla llamando y es por eso que no espera hasta que ocurra el evento para ejecutarse sino que lo hace al cargar la página; el problema es que mi función necesita parámetros y si no usara functionName('value1', 'value2'...) ¿Cómo podría pasárselos? Además en el ejemplo de arriba, leí que para usar preventDefault() se necesita un evento, el cual no veo que esté definido ya que, de nuevo, no se le están pasando parámetros a functionName.

PD: Mi función está almacenada como propiedad de un objeto y los parámetros se le pasan basadas en otras propiedades del mismo, no sé si eso afecte a una posible solución.

2 respuestas 2

3

Lo típico es hacer algo como

var formulario = document.getElementById("miForm");
function llamar(event, p1,p2) { ... }

formulario.addEventListener("submit", event => llamar(event, 'value1', 'value2'...));

De este modo pasas los valores que quieras a la función, anidando su llamada. Otra forma similar de resolverlo es así:

let botones = document.querySelectorAll('button');

function generaFuncion(parametro) {
  return function (evento) {
    console.log('Has pulsado el botón', evento.currentTarget.innerHTML);
    console.log('Tengo el parámetro', parametro);    
  };
}

botones.forEach((boton, indice) => {
  boton.addEventListener("click", generaFuncion(indice));
});
<button> Click 1</button>
<button> Click 2</button>
<button> Click 3</button>
<button> Click 4</button>

Es decir, tienes una función que genera dinámicamente funciones que recibirán los parámetros que pases a la generadora, con una clausura.

1

PD: Mi función está almacenada como propiedad de un objeto y los parámetros se le pasan basadas en otras propiedades del mismo, no sé si eso afecte a una posible solución.

En el ejemplo que presentas no se ve una configuración Object, lo que yo sugiero es usar bind, esto para asegurarte de no perder el contexto de ejecución, al usar bind el evento se pasa implícitamente en los argumentos.

formulario.addEventListener("submit", llamar.bind(this, 'value1', 'value2'));

function llamar(e, param1, param2) {
   console.log(e);
   console.log(param1);
   console.log(param2);
   e.preventDefault();
   alert("Presionado");
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.