JavaScriptを勉強し始めた頃、本やネット検索でのイベント設定を調べると、HTMLタグ内の属性としてイベントハンドラが記述されていることが多く、外部jsファイルに移したいとき、どう書いたら良いか分かりませんでした。

今回は、JavaScriptファイル内で完結するイベントの設定方法を、JavaScriptとjQueryそれぞれの書き方でご紹介します。

よく見るHTMLタグ内でのイベントの設定方法（例えばonclick）

<button id="btn" onclick="test()"></button>

上記でも問題ないですが、ページ構成を定義するHTMLの中に、JavaScriptコードを混在させるのは好ましくありません。
次に記す方法で、HTMLからJavaScriptコードを分離させましょう。

JavaScriptの場合

HTMLからはJavaScriptコードonclick="test()"を消します。

<button id="btn"></button>

続いて、外部のJavaScriptファイルには「HTMLのココがクリックされた時、こうする」という指示を以下のように記述します。

document.getElementById('btn').onclick = function(){
	//処理
}

複数のイベントハンドラを設定したい場合などは、addEventListenerを使用します。

document.getElementById('btn').addEventListener('click', function(){
	//処理
}, false);

jQueryの場合

jQueryの場合は、以下のように記述します。

$('#btn').click(function(){
	//処理
});

複数のイベントハンドラを設定したい場合などは、onを使用します。

$('#btn').on('click',function(){
	//処理
});