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

Question

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

Answer 1

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

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

Answer 2

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

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>

Answer 3

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

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

Обжиг несколько функций из someFunc()

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

Answer 4

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

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

Answer 5

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

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

Answer 6

Вы можете создавать все функции в один и назвать them.Libraries как 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> 

Answer 7

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

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