Wie rufe ich im Onclick-Ereignis mehrere JavaScript-Funktionen auf?

Antworten:

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

Aber wirklich, Sie sollten es besser nicht verwenden onclickund den Ereignishandler über Ihren Javascript-Code an den DOM-Knoten anhängen. Dies ist als unauffälliges Javascript bekannt .

Brad
quelle
1
Vielen Dank für den Hinweis auf unauffälliges JS, ich bin schon einmal darauf gestoßen, und ich sollte es unterlassen, aufdringliches JS zu schreiben, nur weil ich faul bin! xD
Qcom
9
Keine Probleme ... Ich empfehle auch jQuery, das Ihnen bei Ihrem unauffälligen Ziel wirklich helfen wird. Sie können Event-Handler einfach an DOM-Elemente anhängen und viel unauffälliger viel mehr tun. Ich benutze es jetzt seit 2 Jahren und habe nie zurückgeschaut.
Brad
4
Wenn eine Aktion, die im Onclick aufgerufen wird, fehlschlägt, fällt das Ganze wie eine Dominokette und der Onclick funktioniert nicht.
Fiasko Labs
8
Dieses HTML-Attribut ist eigentlich onclick=""nicht onClick="". Es ist ein sehr häufiger Fehler.
DrewT
2
@ ShubhamChopra, wovon Sie sprechen, ist jsxnicht htmlund diese Frage wurde nicht markiert mitjsx
DrewT
75

Eine Verknüpfung mit 1 Funktion definiert

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

Mehrere Funktionen abfeuern von someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
Marko
quelle
5
IMHO, das ist der wahre Ansatz des Programmierers.
b1nary.atr0phy
2
@ b1nary.atr0phy nein. Der Programmierer besteht darin, ein href = "" -Attribut hinzuzufügen, wenn der Benutzer kein Javascript hat. Anschließend entfernen Sie mit Javascript (damit Sie wissen, dass der Benutzer es unterstützt) die href und fügen dem Ereignis Ereignis-Listener hinzu. Auf diese Weise wird ein anderes Modul Ihres Codes, das denselben Klick abhört, nicht überschrieben oder überschreibt Ihren Code. Lesen Sie: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Dies funktioniert möglicherweise nicht gut, wenn Argumente an die Funktionen übergeben werden, insbesondere wenn Sie diese Argumente aus einer serverseitigen Sprache generieren. Es wäre einfacher, den Code durch Anhängen der Funktionen (mit Argumenten) in der serverseitigen Sprache zu erstellen / zu verwalten, als alle möglichen Iterationen sowohl auf dem Server als auch auf dem Client zu testen.
Siphon
Das ist so schön und elegant
Tessaracter
38

Dies ist der Code, der erforderlich ist, 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);
Anandharshan
quelle
7
Dies sollte die richtige Antwort und der richtige Weg sein.
Fusion
11

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

Der Vorteil, den ich beim Binden eines Ereignisses an eine einzelne Funktion und beim anschließenden Aufrufen mehrerer Funktionen sehe, besteht darin, dass Sie einige Fehlerprüfungen durchführen können und einige if else-Anweisungen haben, sodass einige Funktionen nur aufgerufen werden, wenn bestimmte Kriterien erfüllt sind.

Girish Dusane
quelle
9

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>
Erweitern Sie das Snippet

Josh K.
quelle
@hunter: Ich habe mit jQuery gekürzt. Ich erinnere mich nicht genau an den nativen Ereignis-Listener-Code. Sie können auch das tun, was Marko erwähnt, aber es ist besser, einen Ereignis-Listener zu verwenden.
Josh K
1
Möglicherweise wurde die ursprüngliche Frage nicht beantwortet, aber da ich jQuery verwende, hat sie meine beantwortet.
Fiasko Labs
1
Wie kann man das mit einfachem altem Javascript machen?
CodyBugstein
4

ES6 reagieren

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
quelle
2
@ Dies ist JSX, diese Frage ist nicht unter 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>
Erweitern Sie das Snippet

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

Pramod Kharade
quelle
1

Sie können mehrere nur per Code hinzufügen, selbst wenn Sie das zweite onclickAttribut im HTML haben, das ignoriert und click2 triggerednie gedruckt wird. Sie können eines bei Aktion hinzufügen, mousedownaber das ist nur eine Problemumgehung.

Fügen Sie sie am besten per Code hinzu, wie in:

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>
Erweitern Sie das Snippet

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

Eduard Florinescu
quelle
1

Eine Ergänzung 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') });

Stellen Sie sich jedoch 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 ist Ihr Code auch viel einfacher zu lesen und zu warten. Besonders wenn Ihre Funktion größer ist.

Remi
quelle
Für weitere Informationen hat "Tutorialist" Avelx ein schönes Video, das ich zu diesem Thema empfehlen kann: youtube.com/watch?v=7UstS0hsHgI
Remi
0

Sie können alle Funktionen zu einer zusammenfassen und aufrufen. Bibliotheken wie Ramdajs haben die Funktion, 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 aufrufen 

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


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

Dies ist eine Alternative zu Brad Anser - Sie können Komma wie folgt verwenden

onclick="funA(), funB(), ..."

Es ist jedoch besser, diesen Ansatz NICHT zu verwenden - für kleine Projekte können Sie onclick nur bei einem Funktionsaufruf verwenden (mehr: aktualisiertes unauffälliges Javascript ).

Code-Snippet anzeigen

Kamil Kiełczewski
quelle