web-dev-qa-db-fra.com

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

Est-il possible d'utiliser l'attribut onclick html pour appeler plusieurs fonctions JavaScript?

javascripthtmlmethodsonclick
206
Qcom
onclick="doSomething();doSomethingElse();"

Mais en réalité, il vaut mieux ne pas utiliser du tout onclick et attacher le gestionnaire d’événements au nœud DOM via votre code Javascript. C'est ce qu'on appelle javascript discret .

351
brad

n lien avec 1 fonction définie

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

Activer plusieurs fonctions de someFunc()

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

C'est le code requis si vous utilisez uniquement JavaScript et pas jQuery

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
36
anandharshan

J'utiliserais la méthode element.addEventListener pour la lier à une fonction. À partir de cette fonction, vous pouvez appeler plusieurs fonctions.

L'avantage que je vois dans la liaison d'un événement à une fonction unique puis dans l'appel de plusieurs fonctions est que vous pouvez effectuer une vérification des erreurs, avoir des instructions if else afin que certaines fonctions ne soient appelées que si certains critères sont remplis.

10
Girish Dusane

Bien sûr, il suffit de lier 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>
7
Josh K
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.

2
Pramod Kharade

ES6 React

  <MenuItem
          onClick={() => {
            this.props.toggleTheme();
            this.handleMenuClose();
          }}
        >
2
Hitesh Sahu

Vous ne pouvez ajouter plusieurs codes que par code même si vous avez le deuxième élément onclick dans le code html, il est ignoré et que click2 triggered ne soit jamais imprimé, vous pouvez en ajouter un lorsqu’une action mousedown mais est juste une solution de contournement.

Le mieux est donc 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. Si vous ajoutez plusieurs événements, vous pouvez perdre le compte de leur ordre d'exécution.

1
Eduard Florinescu

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 imaginons que plusieurs d'entre eux soient attachés à ce même élément et que vous souhaitiez en supprimer un. Il n'est pas possible de supprimer une seule fonction anonyme de cet écouteur d'événement.

Au lieu de cela, 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 facilite également la lecture et la maintenance de votre code. Surtout si votre fonction est plus grande.

1
Remi

Vous pouvez composer toutes les fonctions en une seule et les appeler.Les bibliothèques telles que Ramdajs ont une fonction permettant de composer plusieurs fonctions en une.

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

ou vous pouvez mettre la composition en tant que fonction séparée dans un fichier js et l'appeler

const newFunction = R.compose(fn1,fn2,fn3);


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