Réponses:
onclick="doSomething();doSomethingElse();"Mais vraiment, il vaut mieux ne pas utiliser onclickdu tout et attacher le gestionnaire d'événements au nœud DOM via votre code Javascript. Ceci est connu sous le nom de javascript discret .
onclick=""pas onClick="". C'est une erreur très courante.
jsxpas htmlet cette question n'a pas été taguée avecjsx
Un lien avec 1 fonction définie
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Lancer plusieurs fonctions depuis someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}Ceci est le code requis si vous utilisez uniquement JavaScript et non jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);J'utiliserais la element.addEventListenerméthode pour le lier à une fonction. À partir de cette fonction, vous pouvez appeler plusieurs fonctions.
L'avantage que je vois en liant un événement à une seule fonction puis en appelant plusieurs fonctions est que vous pouvez effectuer une vérification d'erreur, avoir des instructions if else afin que certaines fonctions ne soient appelées que si certains critères sont remplis.
Bien sûr, liez simplement plusieurs auditeurs.
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>Vous pouvez réaliser / appeler un événement avec une ou plusieurs méthodes.
Vous pouvez ajouter plusieurs uniquement par code, même si vous avez le deuxième onclickattribut en html, il est ignoré et click2 triggeredn'est jamais imprimé, vous pouvez en ajouter un lors de l'actionmousedown mais ce n'est qu'une solution de contournement.
Donc, le mieux est de les ajouter par code comme dans:
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>Vous devez faire attention car les événements peuvent s'accumuler et si vous ajoutez de nombreux événements, vous pouvez perdre le compte de l'ordre dans lequel ils sont exécutés.
Un ajout, pour JavaScript maintenable, utilise une fonction nommée.
Voici l'exemple de la fonction anonyme:
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') });Mais imaginez que vous en avez quelques-uns attachés au même élément et que vous souhaitez supprimer l'un d'entre eux. Il n'est pas possible de supprimer une seule fonction anonyme de cet écouteur d'événements.
À la place, vous pouvez utiliser des fonctions nommées:
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);Cela rend également votre code beaucoup plus facile à lire et à maintenir. Surtout si votre fonction est plus grande.
Vous pouvez composer toutes les fonctions en une seule et les appeler. Les bibliothèques comme Ramdajs ont une fonction pour composer plusieurs fonctions en une seule.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>ou vous pouvez mettre la composition comme une fonction séparée dans le fichier js et l'appeler
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>C'est une alternative à brad anser - vous pouvez utiliser la virgule comme suit
onclick="funA(), funB(), ..."cependant il vaut mieux NE PAS utiliser cette approche - pour les petits projets, vous ne pouvez utiliser onclick qu'en cas d'appel d'une fonction (plus: javascript discret mis à jour ).