JavaScript: イベントハンドラを設定する方法3通り

イベントの発生をきっかけとして行う処理のことをイベントハンドラといいます。

イベントハンドラを設定する方法は次の3通りありますので順番に紹介します。

  1. HTMLタグの中で関連づける
  2. プロパティを使う
  3. addEventListener()メソッドを使う
  4. おすすめの設定方法

イベントハンドラを設定するための事前確認事項

イベントハンドラを設定するためには、事前に次の3つの事項を確認しておく必要があります。
  1. どの要素に対して?
  2. どのイベントに対して?
  3. どのイベントハンドラ?

上の3つの項目をはっきりと決めた上でイベントハンドラを設定します。

以下では、ボタン(button 要素 id="btn")をクリックした時に、 イベントハンドラ btnClickを実行するように設定します。

どの要素?button 要素 id="btn"
どのイベント?クリックイベント
どのイベントハンドラ?btnClick

1. HTMLタグの中で関連付ける

HTMLタグの中で関連付ける場合のサンプルコードです。

サンプルコード


<button id="btn" onclick="btnClick();">ボタン</button>

<script>
    
// イベントハンドラ
function btnClick(){
    console.log('clicked');
}
    
</script>

HTMLタグの中で関連付ける場合は、開始タグの中で次のように記述します。
onイベント名="イベントハンドラ"

イベント名が click で、イベントハンドラが btnClick の場合は次のようになります。

onclick="btnClick();"

2. プロパティを使う

取得した要素オブジェクトのプロパティを使って、 イベントハンドラを設定する場合のサンプルコードです。


<button id="btn">ボタン</button>

<script>

var b = document.getElementById('btn');
    
// onclick プロパティに イベントハンドラを設定
b.onclick = btnClick;

// イベントハンドラ
function btnClick(){
    console.log('clicked');
}

</script>

要素オブジェクトのプロパティを使う場合は、次のように記述します。

要素オブジェクト.onイベント名 = イベントハンドラ;

要素オブジェクトが b、イベント名が click、 イベントハンドラが btnClick なので次のようになります。

b.onclick = btnClick;

注意するのは「b.onclick = btnClick();」と記述すると、 このコードが読み込まれた時に btnClick() が実行されてしまいます。 そして、クリックしても動作しません。

つまり、イベントハンドラが正常に設定されません。 間違えやすいので注意してください。

イベントハンドラを直接記述する場合

イベントハンドラを直接記述する場合は次のように記述します。


var b = document.getElementById('btn');

b.onclick = function(){
    console.log('clicked');
};

3. addEventListener()メソッドを使う

addEventListener()メソッドを使ってイベントハンドラを設定するサンプルコードです。


<button id="btn">ボタン</button>

<script>

var b = document.getElementById('btn');
    
// イベントハンドラを設定
b.addEventListener('click', btnClick, false);

// イベントハンドラ
function btnClick(){
    console.log('clicked');
}

</script>

addEventListener()を使う場合は次のように記述します。

要素オブジェクト.addEventListener('イベント名', イベントハンドラ, false);

要素オブジェクトが b、イベント名が click、 イベントハンドラが btnClick なので次のようになります。

b.addEventListener('click', btnClick, false);

2番目で紹介した 「b.onclick = btnClick」と同じように、 「btnClick()」と記述すると正常に動作しないので注意してください。

イベントハンドラを直接記述する場合

イベントハンドラを直接記述する場合は次のように記述します。


var b = document.getElementById('btn');

b.addEventListener('click', function(){
    console.log('clicked');
}, false);

おすすめの設定方法

今まで説明してきた3つの方法の中で、一番おすすめの方法は3番目の 「addEventListener()メソッドを使う方法」です。

HTML の記述と JavaScriptコードを分離するという点で、2番目か3番目が望ましいのですが、 2番目の方法だと、1つのイベントに対して、1つのイベントハンドラしか設定できません。

それに対して、3番目の方法では複数のイベントハンドラを設定できます。

古いバージョンのIEでは addEventListener() に対応していなかったので あまり使われていなかったのですが、現在では addEventListener() を推奨する流れになっています。

3番目の addEventListener() を使う方法に慣れておくと良いと思います。