Antworten:
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 .
onclick=""nicht onClick="". Es ist ein sehr häufiger Fehler.
jsxnicht htmlund diese Frage wurde nicht markiert mitjsx
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();
}
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);
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.
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>ES6 reagieren
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>
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.
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>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.
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.
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>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 ).