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

Можно ли использовать атрибут onclick html для вызова нескольких функций JavaScript?

Ответ 1

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

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

Ответ 2

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

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

Вызов нескольких функций из someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}

Ответ 3

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

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);

Ответ 4

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

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

Ответ 5

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

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>

Ответ 6

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

Ответ 7

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>

Ответ 8

Вы можете скомпоновать все функции в один и вызвать их. Библиотеки, такие как 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>

Ответ 9

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

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