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.

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!