イベントハンドラの追加

要素のイベントにイベントハンドラを追加するには、要素オブジェクトのaddEventListener()メソッドを使用します。

element.addEventListener(type,eventListener);Code language: CSS (css)

クラス.btnを持つボタンがあるとします。

<button class="btn">Subscribe</button>Code language: HTML, XML (xml)

clickイベントにイベントハンドラをアタッチするには、以下を使用します。

まず、イベントハンドラを定義します。

function clickHandler(event) {
   console.log('Button Clicked');
}Code language: JavaScript (javascript)

次に、ボタン要素のaddEventListener()メソッドを使用します。

const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Code language: JavaScript (javascript)

イベントハンドラ関数を再利用しない場合は、無名関数をイベントハンドラとして使用できます。

const btn = document.querySelector('.btn');
btn.addEventListener('click', function(event){
   console.log('Button Clicked');
});Code language: JavaScript (javascript)

ほとんどの最新のWebブラウザはaddEventListener()メソッドをサポートしています。ただし、IE8は代わりにattachEvent()メソッドを使用します。

IE8をサポートする必要がある場合は、ヘルパー関数を作成できます。

function addEvent(el, type, handler) {
  el.attachEvent ?
    el.attachEvent('on' + type, handler) :
    el.addEventListener(type, handler);
}Code language: JavaScript (javascript)

ボタン要素のclickイベントにイベントハンドラを追加するには、以下を使用します。

addEvent(btn, 'click', function (event) {
  console.log('Button Clicked');
});Code language: JavaScript (javascript)