[JavaScript]addEventListenerを使う

javascript

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

addEventListenerの書き方

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

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

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

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

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

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

 

addEventListenerのイベント一覧

ブラウザ

第一引数 発火条件
DOMContentLoaded DOMツリーの構築完了時点

 

マウス

第一引数 発火条件
click マウスボタンをクリックした時
mousedown マウスボタンを押している時
mouseup マウスボタンを離した時
mousemove マウスカーソルが移動した時

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

 

キーボード

第一引数 発火条件
keypress キーを押して離れた時
keydown キーを押した時
keyup キーを離した時

 



カテゴリー