Chame várias funções JavaScript no evento Onclick

  2. HowTo
  3. JavaScript Howtos
  4. Chame várias funções JavaScript no …
Nithin Krishnan 12 outubro 2023
JavaScript JavaScript Event
  1. Passando funções como valores para o parâmetro onclick
  2. Usando JavaScript discreto
  3. Usando o && e || Operadores
Chame várias funções JavaScript no evento Onclick

Estamos muito familiarizados com o evento onclick em javascript, que dispara uma determinada função passada como um valor para o atributo onclick. O evento Document Object Model (DOM) de HTML é compatível com quase todos os elementos HTML, exceto alguns como <br>, <head>, <html>, <iframe>, <meta>,<param>,<script>,<style> ou <title>. É comumente usado em tags html como <div>, <button>, <li>, <span>, <a> etc. Mas como chamamos mais de uma função em um clique de um <div>, <li> ou um <button>. A seguir estão algumas maneiras de fazer isso.

  • Passando funções como valores para o parâmetro onclick
  • Usando JavaScript discreto
  • Usando o && e || operadores

Passando funções como valores para o parâmetro onclick

A forma mais comum de usar o atributo onclick é atribuir a função como valores ao onclick. Geralmente, escrevemos no código GUI dentro de uma tag HTML. Para passar várias funções como valores, liste-as separadas por ponto-e-vírgula no atributo onclick dessa tag. A sintaxe é a seguinte.

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

Ambas as funções serão executadas uma após a outra. Por exemplo, se usarmos o seguinte código com as funções functionA() e functionB(), o resultado será a execução sequencial das duas funções na ordem mencionada nos 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');
  }
}

Ouput:

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

Observações

  • A execução de várias funções com onclick é suportada em todos os navegadores da web e para a maioria dos elementos HTML. É um método simples e conciso de chamada de várias funções.
  • A execução da função é sequencial. Portanto, você pode planejar a sequência em que as chamadas de método devem ser feitas, listando as funções de acordo.
  • Em vez de usar ponto e vírgula após o nome de uma função, também podemos separá-los com uma vírgula. Isso significa que onclick = "function1(), function2()" também é uma sintaxe válida.
  • Há uma desvantagem em usar várias funções passadas para um evento onclick. Se algum dos métodos passados ​​como parâmetros falhar devido a alguma exceção, ele quebrará toda a cadeia. E todas as funções seguintes não serão executadas.
  • Usar onclick em tags torna o código legível. Não manipulamos o DOM não é manipulado. Significa que especificamos as funções estaticamente no HTML. Portanto, não adicionamos nenhuma função ao evento onclick do elemento DOM em tempo de execução. O navegador analisa o HTML e pode associar os eventos de clique na fase de análise.

Usando JavaScript discreto

Outra forma de passar funções no onclick em JavaScript é adicionar ouvintes onclick no código JavaScript. Neste método, encontramos o elemento de destino e vinculamos nossa função ao evento onclick desse elemento. A abordagem discreta é uma forma de programação onde mantemos os eventos javascript em código js, ​​e o HTML inclui apenas a página estática (Consulte aqui para mais informações). A seguir está a maneira discreta de chamar várias funções no evento de clique.

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

Resultado:

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

Observações

  • As funções são executadas sequencialmente, mas não são dependentes. Portanto, se uma função falhar na execução, o resto das funções não são bloqueadas, ao contrário do caso em onclick="functionA(), functionB()".
  • Podemos adicionar várias funções com este método. Para remover uma função já adicionada dinamicamente, precisamos usar o removeEventListener. A sintaxe é a seguinte.
element.removeEventListener('click', alertFirst);
  • Será difícil depurar a funcionalidade, pois o HTML não mostrará as funções vinculadas ao onclick do elemento HTML. Os métodos são mapeados para o evento onclick em tempo de execução durante a compilação do código javascript.
  • Este método de adicionar onclick em tempo de execução dá a flexibilidade para executar funções de forma inteligente com base na lógica de negócios, pois a associação é feita na fase de compilação em tempo de execução.

Usando o && e || Operadores

Pode-se incluir várias funções separadas por && e || operadores. As funções devem ter um tipo de retorno booleano. Normalmente, usamos essa abordagem quando é necessário decidir sobre algumas condições e, em seguida, executar a função pretendida. Se essas condições precisam de verificações lógicas complexas ou demoradas, é preferível criá-las como funções e mantê-las dentro do código js para tornar o HTML enxuto e legível. O código a seguir detalha o 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
}

No código acima, a função fetchPageDetails() será chamada somente depois que a função isValidPage() retornar true. Em essência, o operador && garante que a função fetchPageDetails() seja executada apenas se o pagenumber for válido.

Observações

  • Neste método, a execução das funções é sequencial. Segue a lógica como código usando o && e o || operadores. Se um método falhar devido a exceções, ele não executará as funções restantes.
  • Podemos usar este método nos casos em que temos funções com tipos de retorno booleanos ou tipos que correspondem ao operador lógico usado no código.
  • Como especificamos as funções no atributo click do elemento HTML, este método é uma forma estática de declarar funções múltiplas. Não fazemos associações em tempo de execução.

Artigo relacionado - JavaScript Event