Comment appeler plusieurs fonctions JavaScript dans l'événement onclick?
est-il possible d'utiliser l'attribut html onclick
pour appeler plus d'une fonction JavaScript?
8 réponses
onclick="doSomething();doSomethingElse();"
mais en fait, il est préférable de ne pas utiliser onclick
du tout et d'attacher le gestionnaire d'événements au noeud DOM par le biais de votre code Javascript. Ceci est connu comme javascript discret .
un lien avec une fonction définie
<a href="#" onclick="someFunc()">Click me To fire some functions</a>
mise à feu de fonctions multiples de someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
C'est le code requis si vous utilisez seulement 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 méthode element.addEventListener
pour la relier à une fonction. À partir de cette fonction, vous pouvez appeler plusieurs fonctions.
l'avantage que je vois en liant un événement à une seule fonction et en appelant ensuite plusieurs fonctions est que vous pouvez effectuer une vérification d'erreur, avoir quelques instructions if else de sorte que certaines fonctions ne soient appelées que si certains critères sont respectés.
bien sûr, liez simplement plusieurs auditeurs à elle.
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>
vous pouvez ajouter multiple seulement par code même si vous avez le deuxième onclick
atribute dans le html qu'il est ignoré, et click2 triggered
n'est jamais imprimé, vous pouvez en ajouter un sur l'action mousedown
mais c'est juste une solution de contournement.
donc le mieux à faire 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 prendre soin que les événements peuvent s'accumuler, et si vous ajoutez de nombreux événements vous pouvez compte à rebours de l'ordre de leur course.
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>
un ajout, pour maintenable JavaScript utilise une fonction nommée.
C'est 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 avez un couple d'entre eux attachés à ce même élément et que vous voulez en enlever un. 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);
This garde également votre code beaucoup plus facile à lire et à maintenir. Surtout si votre fonction est plus grande.