Comment appeler plusieurs fonctions JavaScript dans un événement onclick?

Réponses:

390 
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 .

Brad
la source
1
Merci pour la référence à JS discret, je suis déjà tombé sur cela avant, et je devrais m'abstenir d'écrire JS intrusif juste parce que je suis paresseux! xD
Qcom
9
aucun problème ... Je recommande également fortement jQuery qui vous aidera vraiment avec votre objectif discret. Vous pouvez facilement attacher des gestionnaires d'événements aux éléments DOM et faire beaucoup plus de manière discrète. Je l'utilise depuis 2 ans maintenant et je n'ai jamais regardé en arrière.
brad
4
Si une action appelée dans le onclick échoue, le tout tombe comme une chaîne de dominos et le onclick ne fonctionne pas.
Fiasco Labs
8
Cet attribut html ne l'est en fait onclick=""pas onClick="". C'est une erreur très courante.
DrewT
2
@ShubhamChopra ce dont vous parlez n'est jsxpas htmlet cette question n'a pas été taguée avecjsx
DrewT
76

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();
}
Marko
la source
5
À mon humble avis, c'est la véritable approche du programmeur.
b1nary.atr0phy
2
@ b1nary.atr0phy nope. la façon de programmer est d'ajouter un attribut href = "" lorsque l'utilisateur n'a pas de javascript. puis, avec javascript (pour que vous sachiez que l'utilisateur le prend en charge), vous supprimez le href et ajoutez des écouteurs d'événements à l'événement. de cette façon, si un autre module de votre code écoute le même clic, il ne sera pas écrasé ou écrasera votre code. lire: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Cela peut ne pas fonctionner correctement si des arguments sont passés aux fonctions, en particulier si vous générez ces arguments à partir d'un langage côté serveur. Il serait plus facile de construire / maintenir le code en ajoutant les fonctions (avec tous les arguments) dans le langage côté serveur plutôt que de tester toutes les itérations possibles sur le serveur et le client.
Siphon
C'est tellement beau et élégant
Tessaracter
38

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);
anandharshan
la source
7
cela devrait être la bonne réponse et la bonne façon de procéder.
Fusion
11

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.

Girish Dusane
la source
9

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>
Développer l'extrait

Josh K
la source
@hunter: J'étais raccourci avec jQuery. Je ne me souviens pas exactement du code d'écouteur d'événement natif. Vous pouvez également faire ce que Marko mentionne, mais il est préférable d'utiliser un écouteur d'événements.
Josh K
1
Peut-être pas répondu à la question d'origine, mais puisque j'utilise jQuery, il a répondu à la mienne.
Fiasco Labs
1
Est-il possible de le faire avec du vieux Javascript?
CodyBugstein
4

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
la source
2
@This is JSX, this question is not tagged under jsx
Shubham Chopra
2 

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>
Développer l'extrait

Vous pouvez réaliser / appeler un événement avec une ou plusieurs méthodes.

Pramod Kharade
la source
1

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>
Développer l'extrait

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.

Eduard Florinescu
la source
1

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.

Rémi
la source
Pour plus d'informations, "tutorialist" Avelx a une belle vidéo que je peux recommander à ce sujet: youtube.com/watch?v=7UstS0hsHgI
Remi
0

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>
user93
la source
0

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 ).

Afficher l'extrait de code

Kamil Kiełczewski
la source