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

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

204 голосов
/ 12 октября 2010

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

Ответы [ 10 ]

345 голосов
/ 12 октября 2010 
onclick="doSomething();doSomethingElse();"

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

65 голосов
/ 12 октября 2010

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

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

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

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
36 голосов
/ 11 декабря 2015

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

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
10 голосов
/ 12 октября 2010

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

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

7 голосов
/ 12 октября 2010

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

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>
2 голосов
/ 11 октября 2018 

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 голос
/ 22 марта 2019

ES6 Реакция 

  <MenuItem
          onClick={() => {
            this.props.toggleTheme();
            this.handleMenuClose();
          }}
        >
1 голос
/ 05 августа 2018

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

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

1 голос
/ 12 февраля 2018

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

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

0 голосов
/ 19 февраля 2017

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

Нет похожих вопросов

...