web-dev-qa-db-de.com

Wie rufe ich mehrere JavaScript-Funktionen in einem onclick-Ereignis auf?

Gibt es eine Möglichkeit, das HTML-Attribut onclick zum Aufrufen mehrerer JavaScript-Funktionen zu verwenden?

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

In Wirklichkeit ist es jedoch besser, onclick überhaupt nicht zu verwenden und den Ereignishandler über Ihren Javascript-Code an den DOM-Knoten anzuhängen. Dies wird als nauffälliges Javascript bezeichnet.

351
brad

Ein Link mit 1 definierter Funktion

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

Mehrere Funktionen aus someFunc() auslösen

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

Dies ist der erforderliche Code, wenn Sie nur JavaScript und nicht jQuery verwenden

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

Ich würde die element.addEventListener -Methode verwenden, um sie mit einer Funktion zu verknüpfen. Von dieser Funktion aus können Sie mehrere Funktionen aufrufen.

Der Vorteil, den ich sehe, wenn ich ein Ereignis an eine einzelne Funktion binde und dann mehrere Funktionen aufrufe, ist, dass Sie einige Fehlerprüfungen durchführen und einige if else-Anweisungen haben können, sodass einige Funktionen nur aufgerufen werden, wenn bestimmte Kriterien erfüllt sind.

10
Girish Dusane

Sicher, binden Sie einfach mehrere Hörer daran.

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>

Sie können ein Ereignis mit einer oder mehreren Methoden erreichen/aufrufen.

2
Pramod Kharade

ES6-Reaktion

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

Sie können mehrere nur per Code hinzufügen, selbst wenn Sie den zweiten onclick-Attribut in dem HTML-Code haben, der ignoriert wird, und click2 triggered wird nie gedruckt. Sie können bei der Aktion mousedown einen hinzufügen, dies ist jedoch nur eine Problemumgehung.

Am besten fügen Sie sie wie folgt per Code hinzu:

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>

Sie müssen aufpassen, da sich die Ereignisse häufen können. Wenn Sie viele Ereignisse hinzufügen, können Sie die Anzahl der ausgeführten Ereignisse verlieren.

1

Ein Zusatz für wartbares JavaScript ist die Verwendung einer benannten Funktion.

Dies ist das Beispiel der anonymen Funktion:

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') });

Aber stellen Sie sich vor, Sie haben ein paar davon an dasselbe Element angehängt und möchten eines davon entfernen. Es ist nicht möglich, eine einzelne anonyme Funktion aus diesem Ereignis-Listener zu entfernen.

Stattdessen können Sie benannte Funktionen verwenden:

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

Dadurch bleibt Ihr Code auch viel einfacher zu lesen und zu warten. Vor allem, wenn Ihre Funktion größer ist.

1
Remi

Sie können alle Funktionen zu einer zusammenfassen und diese aufrufen. Bibliotheken wie Ramdajs haben eine Funktion, um mehrere Funktionen zu einer zusammenzufassen.

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

oder Sie können die Komposition als separate Funktion in die js-Datei einfügen und sie aufrufen

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


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