Chamar várias funções em um onclick em JavaScript

Neste artigo você vai aprender a como chamar várias funções em um onclick, um evento da linguagem JavaScript.

Fala programador(a), beleza? Bora aprender mais sobre eventos em JavaScript!

O evento onclick em JavaScript é um evento que ocorre quando um elemento HTML é clicado.

É muito comum querermos chamar múltiplas funções quando um evento onclick ocorre, por exemplo, para validar um formulário e enviá-lo para o servidor.

Neste artigo, vamos ver algumas formas de chamar múltiplas funções em um evento onclick em JavaScript.

Conteúdo também disponível em vídeo:

1. Usando o método addEventListener

Uma forma de chamar múltiplas funções em um evento onclick é usando o método addEventListener.

O método addEventListener permite adicionar um ouvinte de evento a um elemento HTML e é chamado sempre que o evento ocorre.

Por exemplo, vamos supor que temos um botão HTML com o ID button e queremos chamar as funções validateForm e sendForm quando o botão for clicado:

const button = document.getElementById('button');

button.addEventListener('click', validateForm);
button.addEventListener('click', sendForm);

No exemplo acima, usamos o método getElementById para obter o elemento do botão e, em seguida, usamos o método addEventListener para adicionar ouvintes de evento click para as funções validateForm e sendForm.

Quando o botão for clicado, as duas funções serão chamadas.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

2. Usando a notação de atributo

Outra forma de chamar múltiplas funções em um evento onclick é usando a notação de atributo.

A notação de atributo permite adicionar atributos a elementos HTML e é uma forma mais simples de adicionar ouvintes de evento.

Por exemplo, vamos supor que temos um botão HTML com o ID button e queremos chamar as funções validateForm e sendForm quando o botão for clicado:

<button id="button" onclick="validateForm(); sendForm();">Enviar</button>

No exemplo acima, usamos a notação de atributo onclick para adicionar ouvintes de evento click para as funções validateForm e sendForm.

Quando o botão for clicado, as duas funções serão chamadas.

A vantagem da notação de atributo é que ela é mais simples de usar e não requer o uso de JavaScript adicional para adicionar ouvintes de evento.

No entanto, ela tem algumas desvantagens em relação ao método addEventListener.

Uma delas é que só é possível adicionar um único ouvinte de evento por atributo, o que pode ser um problema se precisarmos chamar múltiplas funções em um mesmo evento.

Outra desvantagem é que a notação de atributo não permite adicionar ouvintes de evento para eventos personalizados, apenas para os eventos padrão do HTML.

Além disso, ela não permite usar o objeto event para obter informações sobre o evento ocorrido, como o método addEventListener.

3. Usando uma função intermediária

Uma terceira forma de chamar múltiplas funções em um evento onclick é criando uma função intermediária que chame as outras funções.

Essa abordagem é útil quando precisamos chamar múltiplas funções em um evento e queremos evitar as desvantagens da notação de atributo.

Por exemplo, vamos supor que temos um botão HTML com o ID button e queremos chamar as funções validateForm e sendForm quando o botão for clicado:

const button = document.getElementById('button');

button.addEventListener('click', function(event) {
  validateForm();
  sendForm();
});

No exemplo acima, criamos uma função intermediária que é chamada quando o evento click ocorre.

Dentro da função intermediária, chamamos as funções validateForm e sendForm.

A vantagem dessa abordagem é que é possível chamar múltiplas funções em um evento e ainda usar o objeto event para obter informações sobre o evento ocorrido.

Além disso, é possível adicionar quantos ouvintes de evento quisermos usando o método addEventListener.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Existem várias formas de chamar múltiplas funções em um evento onclick em JavaScript. A forma mais adequada vai depender da sua necessidade e do contexto do seu código.

Se precisar de uma forma simples e rápida de chamar múltiplas funções, pode usar a notação de atributo.

Se precisar de mais flexibilidade e recursos, pode usar o método addEventListener ou uma função intermediária.

Escolha a abordagem que melhor se adequa às suas necessidades e aproveite o poder do JavaScript para criar aplicações incríveis!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Uma dúvida que sempre aparece: e se as funções precisarem receber dados na hora do clique?

Dá pra passar argumento normalmente, tanto na notação de atributo quanto na função intermediária

Se liga:

<button id="button" onclick="validateForm(‘cadastro’); sendForm(‘cadastro’);">Enviar</button>

E dentro do addEventListener, chamando com o valor que você quiser:

button.addEventListener(‘click’, function(event) { validateForm(‘cadastro’); sendForm(‘cadastro’); });

Repara que aqui o segredo é a função intermediária: ela deixa você passar o parâmetro sem quebrar nada

Se você jogasse addEventListener(‘click’, validateForm(‘cadastro’)) direto, a função rodaria na hora de registrar o ouvinte, e não no clique

Tome cuidado com isso!

Vale um aviso que já me pegou: atribuir onclick direto no JavaScript (button.onclick = validateForm) guarda só UMA função

Se você fizer button.onclick = validateForm e depois button.onclick = sendForm, o segundo sobrescreve o primeiro, e só o sendForm roda

Por isso, quando o objetivo é chamar várias funções, o addEventListener é mais seguro: você empilha quantos ouvintes quiser, sem um apagar o outro

Hoje muita gente cai aqui programando dentro do React, Vue ou outro framework, e a lógica muda um pouquinho

No React, por exemplo, o onClick espera uma função só

Pra chamar várias, o caminho é a mesma ideia da função intermediária: você cria uma função que agrupa as chamadas e passa ela pro onClick

<button onClick={() => { validateForm(); sendForm(); }}>Enviar</button>

Mesma lógica de sempre, só muda a roupagem

Perguntas frequentes

Dá pra chamar mais de duas funções no mesmo onclick? Dá sim, não tem limite prático

Com addEventListener você adiciona quantos ouvintes quiser, e na notação de atributo é só separar as chamadas por ponto e vírgula dentro do onclick

As funções são executadas em ordem? Sim, elas rodam na sequência em que você escreveu

Se validateForm vem antes de sendForm, o validateForm roda primeiro

Notação de atributo ou addEventListener, qual usar? Se você quer algo rápido e simples, a notação de atributo resolve

Se precisa de mais controle, acessar o objeto event ou empilhar vários ouvintes sem um sobrescrever o outro, vai de addEventListener

Consigo passar parâmetros pras funções? Consegue, tanto no onclick do HTML quanto na função intermediária dentro do addEventListener