Como chamar várias funções JavaScript no evento onclick?

Respostas:

390 
onclick="doSomething();doSomethingElse();"

Mas, na verdade, é melhor não usar onclicke anexar o manipulador de eventos ao nó DOM por meio do código Javascript. Isso é conhecido como javascript discreto .

Brad
fonte
1
Obrigado pela referência ao JS discreto, já me deparei com isso antes, e devo me abster de escrever o JS obsceno só porque sou preguiçoso! xD
Qcom
9
sem problemas ... Eu também recomendo o jQuery, que realmente o ajudará com seu objetivo discreto. Você pode anexar facilmente manipuladores de eventos a elementos DOM e fazer muito mais tudo de maneira discreta. Eu o uso há 2 anos e nunca mais olhei para trás.
brad
4
Se alguém chamado ação no onclick falhar, tudo cairá como uma corrente de dominó e o onclick não funcionará.
Fiasco Labs
8
Este atributo html onclick=""não é realmente onClick="". É um erro muito comum.
DrewT
2
@ShubhamChopra o que você está falando jsxnão éhtml e esta questão não tenha sido marcado comjsx
DrewT
75

Um link com 1 função definida

<a href="#" onclick="someFunc()">Click me To fire some functions</a>

Disparando várias funções de someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
Marko
fonte
5
IMHO, esta é a abordagem do verdadeiro programador.
precisa saber é o seguinte
2
@ b1nary.atr0phy nope. a maneira do programador é adicionar um atributo href = "" para quando o usuário não tiver javascript. em seguida, com javascript (para que você saiba que o usuário o suporta), remova o href e adicione ouvintes de evento ao evento. dessa forma, se outro módulo do seu código ouvir o mesmo clique, ele não será substituído ou substituirá o código. leia: developer.mozilla.org/pt-BR/docs/Web/API/Event
gcb
3
Isso pode não funcionar bem se você tiver algum argumento sendo transmitido para as funções, especialmente se você gerar esses argumentos a partir de uma linguagem do lado do servidor. Seria mais fácil criar / manter o código anexando as funções (com qualquer argumento) no idioma do servidor, em vez de testar todas as iterações possíveis no servidor e no cliente.
Sifão
Isso é tão bonito e elegante
Tessaracter
38

Este é o código necessário se você estiver usando apenas JavaScript e não jQuery

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
anandharshan
fonte
7
essa deve ser a resposta certa e a maneira correta de como fazê-lo.
Fusion
11

Eu usaria o element.addEventListenermétodo para vinculá-lo a uma função. A partir dessa função, você pode chamar várias funções.

A vantagem que vejo ao vincular um evento a uma única função e depois chamar várias funções é que você pode executar alguma verificação de erro, ter algumas instruções if else para que algumas funções sejam chamadas apenas se determinados critérios forem atendidos.

Girish Dusane
fonte
9

Claro, basta ligar vários ouvintes a ele.

Short cutting with jQuery

$("#id").bind("click", function() {
  alert("Event 1");
});
$(".foo").bind("click", function() {
  alert("Foo class");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>
Expandir snippet

Josh K
fonte
@ hunter: Eu estava cortando rapidamente com jQuery. Não me lembro exatamente o código do ouvinte de evento nativo. Você também pode fazer o que Marko menciona, mas é melhor usar um ouvinte de evento.
Josh K
1
Pode não ter respondido à pergunta original, mas como estou usando o jQuery, ele respondeu ao meu.
Fiasco Labs
1
Alguma maneira de fazer isso com Javascript antigo simples?
CodyBugstein
4

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
fonte
2
@This é JSX, esta questão não é marcado sob JSX
Shubham Chopra
2 

var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
  console.log("Method 2");
}
function method1(){
  console.log("Method 1");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>
Expandir snippet

Você pode conseguir / chamar um evento com um ou mais métodos.

Pramod Kharade
fonte
1

Você pode adicionar múltiplos apenas por código, mesmo se você tiver o segundo onclickatributo no html, ele será ignorado e click2 triggerednunca será impresso. Você pode adicionar um na açãomousedown mas isso é apenas uma solução alternativa.

Portanto, o melhor a fazer é adicioná-los por código, como em:

var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);
<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");'  > Click me</button>
Expandir snippet

Você precisa tomar cuidado, pois os eventos podem se acumular e, se você adicionar muitos eventos, poderá perder a contagem da ordem em que eles são executados.

Eduard Florinescu
fonte
1

Uma adição, para JavaScript sustentável, está usando uma função nomeada.

Este é o exemplo da função anônima:

var el = document.getElementById('id');

// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });

Mas imagine que você tem alguns deles anexados ao mesmo elemento e deseja remover um deles. Não é possível remover uma única função anônima desse ouvinte de evento.

Em vez disso, você pode usar funções nomeadas:

var el = document.getElementById('id');

// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);

Isso também mantém seu código muito mais fácil de ler e manter. Especialmente se sua função for maior.

Remi
fonte
Para mais informações, o "tutorista" Avelx tem um ótimo vídeo que eu posso recomendar sobre esse assunto: youtube.com/watch?v=7UstS0hsHgI
Remi
0

Você pode compor todas as funções em uma e chamá-las. Bibliotecas como o Ramdajs têm uma função para compor várias funções em uma.

<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>

ou você pode colocar a composição como uma função separada no arquivo js e chamá-lo 

const newFunction = R.compose(fn1,fn2,fn3);


<a href="#" onclick="newFunction()">Click me To fire some functions</a>
user93
fonte
0

Esta é uma alternativa de brad anser - você pode usar vírgula da seguinte maneira

onclick="funA(), funB(), ..."

no entanto, é melhor NÃO usar essa abordagem - para pequenos projetos, você pode usar o onclick apenas no caso de uma chamada de função (mais: javascript discreto atualizado ).

Mostrar snippet de código

Kamil Kiełczewski
fonte