Risposte:
onclick="doSomething();doSomethingElse();"Ma davvero, è meglio non usare onclickaffatto e collegare il gestore eventi al nodo DOM tramite il codice Javascript. Questo è noto come javascript discreto .
onclick=""non lo è onClick="". È un errore molto comune.
jsxnon lo è htmle questa domanda non è stata taggata conjsx
Un collegamento con 1 funzione definita
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Attivazione di più funzioni da someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}Questo è il codice richiesto se si utilizza solo JavaScript e non jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);Vorrei usare il element.addEventListener metodo per collegarlo a una funzione. Da quella funzione è possibile chiamare più funzioni.
Il vantaggio che vedo nel legare un evento a una singola funzione e quindi chiamare più funzioni è che puoi eseguire un controllo degli errori, avere alcune istruzioni if else in modo che alcune funzioni vengano chiamate solo se vengono soddisfatti determinati criteri.
Certo, lega semplicemente più ascoltatori.
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>È possibile ottenere / chiamare un evento con uno o più metodi.
Puoi aggiungerne altri solo per codice anche se hai il secondo onclickattributo nell'html che viene ignorato e click2 triggerednon viene mai stampato, puoi aggiungerne uno in azionemousedown ma è solo una soluzione alternativa.
Quindi il meglio da fare è aggiungerli per codice come in:
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>È necessario prestare attenzione poiché gli eventi possono accumularsi e, se si aggiungono molti eventi, è possibile perdere il conto dell'ordine in cui vengono eseguiti.
Un'aggiunta, per JavaScript gestibile, sta usando una funzione denominata.
Questo è l'esempio della funzione anonima:
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') });Ma immagina di averne un paio attaccati allo stesso elemento e vuoi rimuoverne uno. Non è possibile rimuovere una singola funzione anonima dal listener di eventi.
Invece, puoi usare le funzioni denominate:
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);Questo rende anche il tuo codice molto più facile da leggere e mantenere. Soprattutto se la tua funzione è più grande.
Puoi comporre tutte le funzioni in una e chiamarle. Le librerie come Ramdajs hanno una funzione per comporre più funzioni in una.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>oppure puoi mettere la composizione come una funzione separata nel file js e chiamarla
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Questa è un'alternativa a brad anser : puoi usare la virgola come segue
onclick="funA(), funB(), ..."tuttavia è meglio NON utilizzare questo approccio - per i piccoli progetti è possibile utilizzare onclick solo in caso di chiamata di una funzione (altro: javascript discreto aggiornato ).