Llamar a varias funciones de JavaScript en un evento de clic

  2. HowTo
  3. JavaScript Howtos
  4. Llamar a varias funciones de JavaScript …
Nithin Krishnan 12 octubre 2023
JavaScript JavaScript Event
  1. Pasar funciones como valores al parámetro onclick
  2. Usando JavaScript discreto
  3. Utilizando && y || Operadores
Llamar a varias funciones de JavaScript en un evento de clic

Estamos muy familiarizados con el evento onclick en javascript, que activa una determinada función que se pasa como valor al atributo onclick. El evento Document Object Model (DOM) de HTML es compatible con casi todos los elementos HTML excepto algunos como <br>, <head>, <html>, <iframe>, <meta>,<param>,<script>,<style> o <title>. Se usa comúnmente en etiquetas html como <div>, <button>, <li>, <span>, <a>, etc. Pero, ¿cómo llamamos a más de una función en un haga clic en un <div>, <li> o un <button>. A continuación se muestran algunas formas de hacerlo.

  • Pasar funciones como valores al parámetro onclick
  • Uso de JavaScript discreto
  • Utilizando && y || operadores

Pasar funciones como valores al parámetro onclick

La forma más común de utilizar el atributo onclick es asignar la función como valores al onclick. Lo escribimos generalmente en el código GUI dentro de una etiqueta HTML. Para pasar múltiples funciones como valores, enumérelas separadas por punto y coma en el atributo onclick de esa etiqueta. La sintaxis es la siguiente.

onclick = 'functionA(); functionB();'

Ambas funciones se ejecutarán una tras otra. Por ejemplo, si usamos el siguiente código con las funciones functionA() y functionB(), el resultado será la ejecución secuencial de las dos funciones en el orden mencionado en los valores.

<div id="output" onclick="functionA(); functionB();"></div>

function functionA() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' Mars is a planet');
  }
}
function functionB() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' The sky is blue');
  }
}

Producción :

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Observaciones

  • La ejecución de múltiples funciones con onclick es compatible con todos los navegadores web y para la mayoría de los elementos HTML. Es un método limpio y conciso de llamada a múltiples funciones.
  • La ejecución de la función es secuencial. Por lo tanto, puede planificar la secuencia en la que se deben realizar las llamadas al método enumerando las funciones en consecuencia.
  • En lugar de usar punto y coma después del nombre de una función, también podemos separarlos con una coma. Significa que onclick = "function1(), function2()" también es una sintaxis válida.
  • Existe un inconveniente en el uso de múltiples funciones pasadas a un evento onclick. Si alguno de los métodos pasados ​​como parámetros falla debido a alguna excepción, se rompe toda la cadena. Y todas las funciones siguientes no se ejecutarán.
  • El uso de onclick en las etiquetas hace que el código sea legible. No manipulamos el DOM no se manipula. Significa que especificamos las funciones de forma estática en el HTML. Por lo tanto, no agregamos ninguna función al evento onclick del elemento DOM en tiempo de ejecución. El navegador analiza el HTML y puede asociar los eventos de clic en la fase de análisis.

Usando JavaScript discreto

Otra forma de pasar funciones en el onclick en JavaScript es agregar oyentes onclick en código JavaScript. En este método, encontramos el elemento de destino y vinculamos nuestra función al evento onclick de ese elemento. El enfoque discreto es una forma de programación en la que mantenemos los eventos javascript en código js, ​​y el HTML incluye solo la página estática (Consulte aquí para obtener más información). A continuación se muestra la forma discreta de llamar a múltiples funciones en el evento de clic.

let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);

Producción :

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Observaciones

  • Las funciones se ejecutan secuencialmente pero no son dependientes. Por lo tanto, si una función no se ejecuta, el resto de las funciones no se bloquean a diferencia del caso en onclick="functionA(), functionB()".
  • Podemos agregar múltiples funciones con este método. Para eliminar una función ya agregada dinámicamente, necesitamos usar el removeEventListener. La sintaxis es la siguiente.
element.removeEventListener('click', alertFirst);
  • Será difícil depurar la funcionalidad ya que HTML no mostrará las funciones vinculadas con el onclick del elemento HTML. Los métodos se asignan al evento onclick en tiempo de ejecución mientras se compila el código javascript.
  • Este método de agregar onclick en el tiempo de ejecución brinda la flexibilidad de ejecutar funciones de manera inteligente según la lógica empresarial, ya que la asociación se realiza en la fase de compilación en tiempo de ejecución.

Utilizando && y || Operadores

Se pueden incluir múltiples funciones separadas por && y || operadores. Las funciones deben tener un tipo de retorno booleano. Por lo general, usamos este enfoque cuando es necesario decidir sobre algunas condiciones y luego ejecutar la función deseada. Si estas condiciones necesitan verificaciones lógicas complejas o largas, es preferible crearlas como funciones y mantenerlas dentro del código js para que el HTML sea sencillo y legible. El siguiente código detalla el uso.

<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>

function isValidPage(pageNumber) {
  let pageNum = parseInt(pageNumber);
  let maxPagesCount = 10;
  let isValidPageNumber = false;
  if (!isNaN(pageNum)) {
    if (pageNum > 1 && pageNum < maxPagesCount) {
      isValidPageNumber = true;
    }
  }
  return isValidPageNumber;
}

function fetchPageDetails(pageNumber) {
  // Call Backend service to get the detils
}

En el código anterior, la función fetchPageDetails() se llamará solo después de que la función isValidPage() devuelva true. En esencia, el operador && se asegura de que la función fetchPageDetails() se ejecute sólo si el pagenumber es válido.

Observaciones

  • En este método, la ejecución de las funciones es secuencial. Sigue la lógica como código usando el && y el || operadores. Si un método falla debido a excepciones, no ejecuta las funciones restantes.
  • Podemos utilizar este método en los casos en que tengamos funciones con tipos de retorno booleanos o tipos que coincidan con el operador lógico utilizado en el código.
  • Como especificamos las funciones en el atributo click del elemento HTML, este método es una forma estática de declarar múltiples funciones. No hacemos ninguna asociación en tiempo de ejecución.

Artículo relacionado - JavaScript Event