Как вызвать несколько функций JavaScript в событии onclick?

Ответы:

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

Но на самом деле лучше не использовать onclickвообще, а подключать обработчик событий к DOM-узлу через код Javascript. Это известно как ненавязчивый JavaScript .

штифтик
источник
1
Спасибо за ссылку на ненавязчивый JS, я сталкивался с этим раньше, и я должен воздерживаться от написания навязчивого JS только потому, что я ленивый! xD
Qcom 12.10.10
9
никаких проблем ... Я также очень рекомендую jQuery, который действительно поможет вам в вашей ненавязчивой цели. Вы можете легко прикреплять обработчики событий к элементам DOM и делать намного больше всего ненавязчивого. Я использовал его в течение 2 лет и никогда не оглядывался назад.
Брэд
4
Если одно вызванное действие в onclick терпит неудачу, все это падает как цепочка домино, и onclick не работает.
Fiasco Labs
8
Этот атрибут HTML на самом деле onclick=""нет onClick="". Это очень распространенная ошибка.
DrewT
2
@ShubhamChopra, о чем вы говорите, jsxнет, htmlи этот вопрос не был помеченjsx
DrewT
76

Ссылка с определенной функцией

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

Запуск нескольких функций из someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
Marko
источник
5
ИМХО, это настоящий подход программиста.
b1nary.atr0phy
2
@ b1nary.atr0phy Нет. программист может добавить атрибут href = "", когда у пользователя нет JavaScript. затем с помощью javascript (так что вы знаете, что пользователь поддерживает его) вы удаляете href и добавляете прослушиватели событий к событию. таким образом, если другой модуль вашего кода будет прослушивать тот же щелчок, он не будет перезаписан или перезаписать ваш код. Читайте: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Это может не сработать, если у вас есть какие-либо аргументы, передаваемые в функции, особенно если вы генерируете эти аргументы из серверного языка. Было бы проще создать / поддерживать код, добавляя функции (с любыми аргументами) в язык на стороне сервера, а не тестируя все возможные итерации как на сервере, так и на клиенте.
Сифон
Это так красиво и элегантно
Tessaracter
38

Этот код требуется, если вы используете только JavaScript, а не jQuery

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
anandharshan
источник
7
это должен быть правильный ответ и правильный способ, как это сделать.
Fusion
11

Я бы использовал element.addEventListenerметод, чтобы связать его с функцией. Из этой функции вы можете вызывать несколько функций.

Преимущество, которое я вижу в привязке события к одной функции и последующем вызове нескольких функций, состоит в том, что вы можете выполнить некоторую проверку ошибок, иметь некоторые операторы if else, чтобы некоторые функции вызывались только при соблюдении определенных критериев.

Гириш Душане
источник
9

Конечно, просто привяжите к нему несколько слушателей.

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>
Развернуть фрагмент

Джош К
источник
@hunter: у меня было короткое время с JQuery. Я точно не помню собственный код слушателя событий. Вы также можете делать то, что упоминает Марко, но лучше использовать прослушиватель событий.
Джош К
1
Возможно, не ответил на оригинальный вопрос, но так как я использую jQuery, он ответил на мой.
Fiasco Labs
1
Любой способ сделать это с простым старым Javascript?
CodyBugstein
4

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Хите саху
источник
2
@ Это JSX, этот вопрос не помечен как jsx
Чопра
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>
Развернуть фрагмент

Вы можете достичь / вызвать одно событие одним или несколькими методами.

Прамод Хараде
источник
1

Вы можете добавлять несколько только по коду, даже если у вас есть второй 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>
Развернуть фрагмент

Вы должны быть осторожны, так как события могут накапливаться, и если вы добавите много событий, вы можете потерять счет в порядке их запуска.

Эдуард Флоринеску
источник
1

Одним из дополнений для поддерживаемого 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);

Это также делает ваш код намного проще для чтения и обслуживания. Особенно, если ваша функция больше.

Remi
источник
Для получения дополнительной информации, у "tutorialist" Avelx есть хорошее видео, которое я могу порекомендовать на эту тему: youtube.com/watch?v=7UstS0hsHgI
Remi
0

Вы можете объединить все функции в одну и вызывать их. В библиотеках, подобных Ramdajs, есть функция для объединения нескольких функций в одну.

<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>
user93
источник
0

Это альтернатива Brad Anser - вы можете использовать запятую следующим образом

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

однако лучше НЕ использовать этот подход - для небольших проектов вы можете использовать onclick только в случае вызова одной функции (более подробно: обновлен ненавязчивый javascript ).

Показать фрагмент кода

Камил Келчевски
источник