web-dev-qa-db-ja.com

Onclickイベントで複数のJavaScript関数を呼び出す方法

onclick html属性を使用して複数のJavaScript関数を呼び出す方法はありますか？

javascripthtmlmethodsonclick
199
Qcom
onclick="doSomething();doSomethingElse();"

しかし、実際には、onclickをまったく使用せず、Javascriptコードを介してイベントハンドラをDOMノードにアタッチするほうがよいでしょう。これは 控えめなjavascript として知られています。

337
brad

1つの機能が定義されたリンク 

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

someFunc()から複数の関数を起動する 

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

これは、JavaScriptだけを使用し、jQueryを使用しない場合に必要なコードです。

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

私は element.addEventListener メソッドを使ってそれを関数にリンクします。その機能から複数の機能を呼び出すことができます。

イベントを単一の関数にバインドしてから複数の関数を呼び出すことで得られる利点は、エラーチェックを実行できること、if elseステートメントをいくつか実行できること、特定の基準が満たされた場合にのみ関数が呼び出されることです。

10
Girish Dusane

もちろん、複数のリスナーをそれにバインドするだけです。

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
Josh K
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つ以上のメソッドを使って1つのイベントを達成/呼び出すことができます。

2
Pramod Kharade

Htmlに2番目のonclick atributeが無視され、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
Eduard Florinescu

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') });

しかし、その同じ要素にそれらのうちのいくつかが接続されていて、それらのうちの1つを削除したいとします。そのイベントリスナから単一の無名関数を削除することはできません。

代わりに、名前付き関数を使うことができます。

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
Remi

ES6反応 

  <MenuItem
          onClick={() => {
            this.props.toggleTheme();
            this.handleMenuClose();
          }}
        >
0
Hitesh Sahu

すべての機能を1つにまとめて呼び出すことができます。 Ramdajs のようなライブラリには、複数の機能を1つにまとめる機能があります。

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