Odpowiedzi:
onclick="doSomething();doSomethingElse();"Ale tak naprawdę lepiej nie używać onclickw ogóle i dołączać moduł obsługi zdarzeń do węzła DOM za pomocą kodu JavaScript. Jest to znane jako dyskretny JavaScript .
onclick=""nie jest w rzeczywistości onClick="". To bardzo częsty błąd.
jsxnie jest, htmla to pytanie nie zostało oznaczone tagiemjsx
Łącze ze zdefiniowaną 1 funkcją
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Odpalanie wielu funkcji od someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
Jest to kod wymagany, jeśli używasz tylko JavaScript, a nie jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
Użyłbym tej element.addEventListenermetody, aby połączyć ją z funkcją. Z tej funkcji można wywoływać wiele funkcji.
Zaletą, którą widzę w powiązaniu zdarzenia z pojedynczą funkcją, a następnie w wywołaniu wielu funkcji, jest to, że możesz wykonać pewne sprawdzanie błędów, mieć niektóre instrukcje if if else, aby niektóre funkcje były wywoływane tylko, jeśli spełnione są określone kryteria.
Jasne, po prostu powiąż z nim wielu słuchaczy.
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 React
<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>Możesz osiągnąć / wywołać jedno wydarzenie za pomocą jednej lub więcej metod.
Możesz dodać wiele tylko za pomocą kodu, nawet jeśli masz drugi onclickatrybut w html, który zostanie zignorowany i click2 triggerednigdy nie zostanie wydrukowany, możesz dodać jeden po akcji, mousedownale to tylko obejście.
Najlepiej więc dodać je kodem, jak w:
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>Musisz uważać, ponieważ wydarzenia mogą się kumulować, a jeśli dodasz wiele wydarzeń, możesz stracić liczenie kolejności, w jakiej są one uruchamiane.
Jednym z dodatków, do obsługi JavaScript jest użycie nazwanej funkcji.
Oto przykład funkcji anonimowej:
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') });Ale wyobraź sobie, że masz kilka z nich podłączonych do tego samego elementu i chcesz usunąć jeden z nich. Nie można usunąć jednej anonimowej funkcji z tego detektora zdarzeń.
Zamiast tego możesz użyć nazwanych funkcji:
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);Dzięki temu kod jest znacznie łatwiejszy do odczytania i utrzymania. Zwłaszcza jeśli twoja funkcja jest większa.
Możesz połączyć wszystkie funkcje w jedną i wywołać je. Biblioteki takie jak Ramdajs mają funkcję łączenia wielu funkcji w jedną.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>lub możesz umieścić kompozycję jako osobną funkcję w pliku js i wywołać ją
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Jest to alternatywa dla Brad Anser - możesz użyć przecinka w następujący sposób
onclick="funA(), funB(), ..."jednak lepiej NIE stosować tego podejścia - w przypadku małych projektów można użyć funkcji onclick tylko w przypadku wywołania jednej funkcji (więcej: zaktualizowany dyskretny javascript ).