Respostas:
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 .
onclick=""não é realmente onClick="". É um erro muito comum.
jsxnão éhtml e esta questão não tenha sido marcado comjsx
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();
}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);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.
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>ES6 React
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>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>Você pode conseguir / chamar um evento com um ou mais métodos.
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>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.
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.
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>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 ).