Comment appeler plusieurs fonctions JavaScript dans l'événement onclick?

Question

Est-il possible d'utiliser l'attribut onclick html pour appeler plus d'une fonction JavaScript?

Answer 1

onclick="doSomething();doSomethingElse();" 

Mais vraiment, vous êtes mieux de ne pas utiliser du tout onclick et attacher le gestionnaire d'événements au nœud DOM dans votre code Javascript. Ceci est connu comme unobtrusive javascript.

Answer 2

Bien sûr, il suffit de lier plusieurs écouteurs.

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>

Answer 3

Un lien avec une fonction définie

<a href="#" onclick="someFunc()">Click me To fire some functions</a> 

Firing multiples fonctions de someFunc()

function someFunc() { 
    showAlert(); 
    validate(); 
    anotherFunction(); 
    YetAnotherFunction(); 
} 

Answer 4

j'utiliser la méthode element.addEventListener pour le relier à une fonction. A 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 des instructions if else, de sorte que certaines fonctions ne sont appelées que si certains critères sont remplis.

Answer 5

Ce code est nécessaire 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); 

Answer 6

Vous pouvez composer toutes les fonctions en un seul et appeler them.Libraries comme Ramdajs a une fonction pour composer plusieurs fonctions en un seul .

<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a> 

ou vous pouvez mettre la composition en 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> 

Answer 7

Vous pouvez ajouter plusieurs que par le code même si vous avez la deuxième onclick atribute dans le html il obtient ignoré, et click2 triggered ne sera jamais imprimé, vous pouvez ajouter un sur l'action mousedown mais c'est juste une solution de contournement.

Ainsi, le mieux à faire est de les ajouter par le 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 accumuler, et si vous ajoutez beaucoup vous des événements peut perdre le compte de l'ordre, ils sont courus.