JavaScript
EventListener

addEventListener type一覧と各ブラウザ対応

More than 1 year has passed since last update.

Javascriptで良く使うtype一覧(発火条件)と各ブラウザの時の注意点を記載します。


ブラウザでの注意点

// このような要素があった時

<div id="hoge">擬似ボタンだよ</div>

.

注意1:関数名testに ( ) をつけない

document.addEventListener("click", test);

.

注意2:実際の関数には引数をつける

function test(event){

  console.log(event);
}

ここで重要なのが、こちらもしtest()にしても、chrome, safariなどではしっかり発火します。それは自動でeventと言う名前で引数を用意してくれるから。しかしfirefoxなどでは引数を特定できず通らない。

.

chrome, safariなどは通るが、firefoxは通らない

function test(){

  console.log(event)
}

つまりは、しっかり上のように引数名event(デフォルト)、もしくは任意の値(今回はevt)を設定しよう

function test(evt){

  console.log(evt);
}

またここからは実際のタイプ発火条件一覧です。


マウス関連

click:ボタンをクリックしたときに発火

mousemove:カーソルがターゲット内に移動したときに発火

mouseover:カーソルがターゲット内に侵入してきたときに発火

mousedown:ボタンを押下したときに発火

mouseup:ボタンを離したときに発火

mouseout:カーソルがターゲット外に出たときに発火


キーボード関連

keypress:キーを押して離したときに発火

keydown:キー押下時に発火

keyup:キーを離したときに発火


DOM関連

DOMFocusIn:ターゲットがフォーカスを受け取ったとき発火

DOMFocusOut:ターゲットがフォーカスを失ったとき発火

DOMActivate:ターゲットがアクティブになったとき発火


INPUT関連

select:テキストフィールドで文字が選択されたときに発火

change:コントロールの値が変化した後に発火

submit:submitボタンが押されたときに発火

reset:resetボタンが押されたときに発火

focus:コントロールがフォーカスを受け取ったときに発火

blur:コントロールがフォーカスを失ったときに発火


その他

load:読み込みが完了したときに発火

scroll:コントロール付属のスクロールバー位置が変更されたときに発火

resize:コントロールのサイズが変更されたときに発火