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

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

182
html javascript methods onclick

8 ответов

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

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

311

связь с 1 определенной функцией

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

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

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

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

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

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

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

10

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

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>
4

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

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

1

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

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

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

0