Help us understand the problem. What is going on with this article?

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:コントロールのサイズが変更されたときに発火

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away