Відповіді:
onclick="doSomething();doSomethingElse();"Але насправді, вам краще взагалі не використовувати onclickта приєднувати обробник подій до вузла DOM за допомогою коду Javascript. Це відоме як ненав'язливий JavaScript .
onclick=""ні onClick="". Це дуже поширена помилка.
jsxнемає, htmlі це питання не позначено тегамиjsx
Посилання з визначеною 1 функцією
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Запуск декількох функцій від someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}Цей код необхідний, якщо ви використовуєте лише JavaScript, а не jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);Я використовував би element.addEventListenerметод, щоб зв’язати його з функцією. З цієї функції можна викликати кілька функцій.
Перевага, яку я бачу в прив'язці події до однієї функції, а потім виклику декількох функцій, полягає в тому, що ви можете виконати деяку перевірку помилок, мати деякі, якщо інші заяви, так що деякі функції отримують виклик лише у разі дотримання певних критеріїв.
Звичайно, просто прив’яжіть до нього кількох слухачів.
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>Ви можете досягти / викликати одну подію одним або кількома методами.
Ви можете додати кілька лише за кодом, навіть якщо у вас є другий onclickатрибут у html, який він ігнорується, і click2 triggeredніколи не друкується, ви можете додати його в діїmousedown але це лише обхідне рішення.
Тож найкраще зробити це додати їх за кодом, як у:
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>Вам потрібно подбати, оскільки події можуть накопичуватися, і якщо ви додасте багато подій, ви можете втратити кількість порядку, за яким вони проходять.
Одним із додатків для підтримання JavaScript є використання названої функції.
Це приклад анонімної функції:
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') });Але уявіть, що у вас є кілька прикріплених до того ж елемента і хочете видалити один з них. Видалити жодну анонімну функцію зі слухача цього події неможливо.
Натомість ви можете використовувати названі функції:
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);Це також значно полегшує ваш код для читання та обслуговування. Особливо, якщо ваша функція більша.
Ви можете скласти всі функції в одну і викликати їх. Бібліотеки, як Рамдайс, мають функцію складання декількох функцій в одну.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>або ви можете помістити композицію як окрему функцію у файл js та викликати її
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Це альтернатива brad anser - ви можете використовувати кому наступним чином
onclick="funA(), funB(), ..."однак краще НЕ використовувати цей підхід - для малих проектів ви можете використовувати onclick лише у випадку виклику однієї функції (докладніше: оновлений ненав’язливий JavaScript ).