[JavaScript]addEventListenerを使う

特定の操作を発火条件として設定できるaddEventListenerですが、addEventListenerの使い方をまとめます。

addEventListenerの書き方

document.addEventListener('click', function(){
    console.log('click!')
});

第一引数にイベント発火条件を記載し、第二引数にイベントが発生した際の処理を記載します。

上記の例はシンプルに画面をクリックした時にコンソールに文字を表示するスクリプトになります。

第一引数の発火条件は感覚的に分かりやすいと思います。

イベントターゲットはelement、window、documentとあります。

今回はdocumentにフォーカスして紹介します。

addEventListenerのイベント一覧

ブラウザ

マウス

clickは頻度が高いと思いますが、あとは状況に応じて。mousemoveはマウスのカーソルが動く度に処理が走るので思い要注意です。

キーボード