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?

182
demandé sur Chris Bier 2010-10-12 03:44:39

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 .

311
répondu brad 2017-03-08 18:13:27

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();
}
62
répondu Marko 2010-10-11 23:48:19

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);
30
répondu anandharshan 2017-02-08 08:14:27

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.

10
répondu Girish Dusane 2016-06-06 14:01:14

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>
4
répondu Josh K 2017-06-20 13:14:38

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.

1
répondu Eduard Florinescu 2018-02-12 20:03:00

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>
0
répondu user93 2017-02-19 05:19:04

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.

0
répondu Remi 2018-08-05 11:47:56