Chame várias funções JavaScript no evento Onclick
-
Passando funções como valores para o parâmetro
onclick - Usando JavaScript discreto
-
Usando o
&&e||Operadores
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
onclickem 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 eventoonclickdo 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
onclickdo elemento HTML. Os métodos são mapeados para o eventoonclickem tempo de execução durante a compilação do código javascript. - Este método de adicionar
onclickem 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.