【JavaScript入門】イベント処理の定義方法

JavaScriptでのイベント処理の定義方法についてまとめてみました。

イベント処理の定義方法

イベント処理の定義方法は、大きく２つに分けることができます。

・イベントハンドラを使用する方法

・イベントリスナーを使用する方法

以下では、それぞれの定義方法や使い方をみていきます。

イベントハンドラ

イベントハンドラを使用したイベント処理では

・HTML要素の属性としてイベントを定義する

・JavaScriptで要素のプロパティとして定義する

の２つの方法があります。

HTML要素の属性としてイベントを定義する

例えば、button要素にクリックイベントが発生した時の処理は、次のように定義します。

<button onclick="showAlertMsg()">ボタン</button>

<script>
  function showAlertMsg(){
    alert("クリックイベントが発生しました");
  }
</script>

function showAlertMsg(){

alert("クリックイベントが発生しました");

}

</script>

button要素の属性onclickに、クリックされた際に、showAlertMsgメソッドを呼びだすように定義しています。

また、関数ではなく次のように直接処理を記述することもできます。

<button onclick="window.alert('クリックイベントが発生しました')">ボタン</button>

1	<button onclick="window.alert('クリックイベントが発生しました')">ボタン</button>

JavaScriptで要素のプロパティとして定義する

続いて、同じ処理を要素のプロパティとして定義します。

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

<script>
  window.onload = function(){
    document.getElementById('btn1').onclick = function(){
      alert('クリックイベントが発生しました。');
    }
  }
</script>

window.onload = function(){

document.getElementById('btn1').onclick = function(){

alert('クリックイベントが発生しました。');

}

</script>

JavaScriptから要素にアクセスするために、button要素にid属性を追加しました。

JavaScriptでは、document.getElementById(‘btn1’)で対象となるHTML要素（button）を取得し、その要素のプロパティonclickに関数を登録しています。

このようにすることで、button（btn1）がクリックされると、onclickプロパティに登録された処理が実行されます。

注意点として、イベントハンドラを登録する際に、対象要素がロードされている必要があります。

そのため、window.onload でページがロードされた際に、document.getElementById(‘btn1’).onclick でイベントハンドラを登録しています。

イベントリスナー

イベントリスナーを使用したイベント処理の定義には、addEventListenerメソッドを使用します。

先ほどの例を、イベントリスナーを使って定義すると次のようになります。

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

<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('btn1').addEventListener('click', function(){
      alert('クリックイベントが発生しました。');
    }, false);
  }, false);
</script>

document.addEventListener('DOMContentLoaded', function(){

document.getElementById('btn1').addEventListener('click', function(){

alert('クリックイベントが発生しました。');

}, false);

</script>

イベントリスナーも、対象のHTML要素がロードされている必要があります。

そのため、’DOMContentLoaded’ を使ってHTML要素がロードされたタイミングで

document.addEventListener('DOMContentLoaded', function(){

1	document.addEventListener('DOMContentLoaded', function(){

クリック処理のイベントリスナーを登録しています。

document.getElementById('btn1').addEventListener('click', function(){

1	document.getElementById('btn1').addEventListener('click', function(){

また、普段あまり使用しないかもしれませんが、イベントリスナーを使用すると、１つの要素に同じイベント処理を複数定義することもできます。

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

<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('btn1').addEventListener('click', function(){
      alert('１つ目の処理');
    }, false);

    document.getElementById('btn1').addEventListener('click', function(){
      alert('２つ目の処理');
    }, false);

  }, false);
</script>

document.addEventListener('DOMContentLoaded', function(){

document.getElementById('btn1').addEventListener('click', function(){

alert('１つ目の処理');

}, false);

document.getElementById('btn1').addEventListener('click', function(){

alert('２つ目の処理');

}, false);

</script>

この例では、ボタンをクリックすると、初めに “1つ目の処理”というアラートメッセージが表示され、次に “2つ目の処理”というアラートメッセージが表示されます。

まとめ

定義方法には、大きく分けて

・イベントハンドラ（属性、プロパティ）

・イベントリスナー

を使用して定義することができます。

どちらかというと、イベントリスナーを使用して定義する方法がおすすめです。

逆にイベントハンドラ（属性）は、HTMLとJSのコードが混在してしまうので、出来るだけ避けたほうがいいかもしれません。

また、イベントハンドラ（属性）以外の定義方法では、イベント処理のトリガーとなる要素がロードされてから、イベントを登録しなければいけない点に注意が必要です。