addEventListenerメソッド

メソッド addEventListener は、要素にイベントハンドラを割り当てることを可能にします。これを使用して、例えば、ボタンがクリックされたときや、テキストフィールドでテキストが入力されたときの動作を指定できます。第一引数にはイベントの種類を、第二引数には第一引数で指定したイベントが発生した後に実行される関数を指定します。第三引数（オプション）には、オブジェクトの特性（once、capture、passive）または useCapture パラメータを渡します。

構文

javascript要素.addEventListener('イベントタイプ', 関数, [オブジェクト特性]);
または
要素.addEventListener('イベントタイプ', 関数, [useCapture]);

例

ボタンがクリックされたときにメッセージを表示するようにしてみましょう：

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('message');
});

Результат:

例

インプットからフォーカスが外れたとき、そのインプットのテキストを含むメッセージを表示するコードを書いてみましょう：

html<input id="input" value="text">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

例

ボタンがクリックされたときに、メッセージがコンソールに1回だけ表示されるようにしましょう。そのために第二引数（オプション）を利用します：

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('message');
  },
  {
    once: true
  }
);

例

パラメータ passive は、イベント処理中にメソッド event.preventDefault の呼び出しを禁止します。前の例に event.preventDefault メソッドを適用し、さらにパラメータ passive に値 true を指定してみましょう：

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

コードを実行すると、以下のメッセージが表示されます：

javascript'No message';
'Unable to preventDefault inside passive event listener invocation.'

例

パラメータ useCapture が値 true の場合、イベントは内側の要素から外側の要素へバブリングします。値 false の場合は、外側の要素から内側の要素へバブリングします。パラメータ useCapture を渡す場合、その名前は省略され、単に true または false と記述します。親要素と子要素がクリックされたときに、イベントがどのようにバブリングするか見てみましょう：

html<div id="parent">Parent
  <p id="child">Child</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'),
  true
);
child.addEventListener('click',
  () => alert('child'),
  true
);

Результат:

関連項目