回答:
onclick="doSomething();doSomethingElse();"しかし、実際には、onclickJavaScriptコードを使用して、イベントハンドラーをまったく使用せずに、DOMノードにイベントハンドラーをアタッチする方がベターです。これは控えめなjavascriptとして知られています。
onclick=""はありませんonClick=""。これはよくある間違いです。
jsxませんhtmlし、この質問がでタグ付けされていないjsx
1つの関数が定義されたリンク
<a href="#" onclick="someFunc()">Click me To fire some functions</a>からの複数の関数の実行 someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}element.addEventListenerメソッドを使用して関数にリンクします。その関数から複数の関数を呼び出すことができます。
イベントを単一の関数にバインドしてから複数の関数を呼び出す利点は、エラーチェックを実行し、if elseステートメントを使用して、特定の条件が満たされた場合にのみ一部の関数が呼び出されることです。
もちろん、それに複数のリスナーをバインドするだけです。
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>ES6 React
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>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つのイベントを達成/呼び出すことができます。
onclickhtmlに2番目の属性があり、それが無視されclick2 triggeredて印刷されない場合でも、コードによってのみ複数を追加できますmousedown。アクションに1つ追加できますが、これは単なる回避策です。
したがって、最善の方法は、次のようにコードで追加することです。
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>イベントが山積みになる可能性があるので注意する必要があります。多くのイベントを追加する場合は、それらが実行される順序の数を失う可能性があります。
さらに、保守可能な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') });しかし、同じ要素にそれらの2つがアタッチされていて、そのうちの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つにまとめて呼び出すことができます。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>これはブラッドアンサーの代わりです-次のようにカンマを使用できます
onclick="funA(), funB(), ..."ただし、このアプローチは使用しない方が適切です。小規模なプロジェクトでは、1回の関数呼び出しの場合にのみonclickを使用できます（詳細：控えめなJavaScriptが更新されました）。