山本ワールド
イベント
イベントの設定
以下のソースはイベントの登録方法をいくつか示しています。
要素に直接登録するときは、イベント名xxxにonを前置しonxxxと記述します。
Javascriptで登録する場合はaddEventListenerを使用します。複数のイベントを登録することができます。removeEventListenerで削除することができます。
a hrefに直接記述することもできます。
1,2ボタン及びリンクをクリックすると対応するイベントが発生し文字を書き換えます。
要素に直接登録するときは、イベント名xxxにonを前置しonxxxと記述します。
Javascriptで登録する場合はaddEventListenerを使用します。複数のイベントを登録することができます。removeEventListenerで削除することができます。
a hrefに直接記述することもできます。
1,2ボタン及びリンクをクリックすると対応するイベントが発生し文字を書き換えます。
mouseイベント
mousemoveを使用するとカーソル位置を取得することができます。
addEventListenerでSVGの四角形にmousemoveイベントを登録しています。
イベントハンドラでevent.clientX,event.clientYでクライアント座標を取得できます。
その他にeventで以下のものが使用できます。
赤い四角形の中でマウスの移動、ボタンの状態を取得することができます。
クライアント座標では扱いづらいのでオブジェクトのクライアント座標をgetBoundingClientRectで取得して左上座標を差し引いでいます。 マウスボタンにもイベント(mouseup,mousedown,contextmenu)を登録しています。
右クリックはcontextmenuイベントを使用しています。ディフォルトではcontextmenuイベント発生後に通常ブラウザの右クリックメニューが表示されてしまうのを防ぐためpreventDefaultと戻り値をfalseに設定します。
すべて共通のイベントハンドラを使用しています。イベントの種類はevent.typeで取得できます。
addEventListenerでSVGの四角形にmousemoveイベントを登録しています。
イベントハンドラでevent.clientX,event.clientYでクライアント座標を取得できます。
その他にeventで以下のものが使用できます。
プロパティ | 説明 |
---|---|
clientX,clientY | 要素の座標 |
pageX,pageY | ページ上の座標(スクロール量が加味される) |
screenX,screenY | モニター上の座標 |
offsetX,offsetY | 要素からのオフセット座標 |
target | イベントの発生したオブジェクト |
type | イベントの種類 |
canselBubble | イベント伝達 |
altkey | Altキー押下 |
altLeft | 左Altキー押下 |
ctrlKey | Ctrlキー押下 |
ctrlLeft | 左Ctrlキー押下 |
shiftKey | shiftキー押下 |
shiftLeft | 左shiftキー押下 |
metaKey | メタキー押下 |
button | マウスボタン押下 0bit目:左 1bit目:右 2bit目:中 |
keyCode | キーコード |
whellDelta | ホイール移動量 |
axis | トラックパッド方向 |
detail | ホイール移動量 |
クライアント座標では扱いづらいのでオブジェクトのクライアント座標をgetBoundingClientRectで取得して左上座標を差し引いでいます。 マウスボタンにもイベント(mouseup,mousedown,contextmenu)を登録しています。
右クリックはcontextmenuイベントを使用しています。ディフォルトではcontextmenuイベント発生後に通常ブラウザの右クリックメニューが表示されてしまうのを防ぐためpreventDefaultと戻り値をfalseに設定します。
すべて共通のイベントハンドラを使用しています。イベントの種類はevent.typeで取得できます。
待機中
イベントの種類
種類 | xxx | 説明 |
---|---|---|
ウィンドウ | resize | ウィンドウのサイズが変更(Windowオブジェクトのみ) |
scroll | 要素のコンテンツがスクロール | |
ドキュメント | load | リソースのロードが完了 |
unload | アンロード (ロードする前) | |
readystatechange | documentのreadyState属性が変化 | |
フォーム | submit | フォームの送信が要求 |
reset | フォームのリセットが要求 | |
change | 要素の値が変更され、要素が入力フォーカスを失った | |
select | テキストが選択 | |
focus | 要素が入力フォーカスを得た | |
blur | 要素が入力フォーカスを失った | |
input | inputまたはtextarea要素のValueが変化した | |
マウス | click | マウスでクリック |
contextmenu | マウスで右クリック、またはアプリケーションキーが押されるなどして、コンテキストメニューが表示されるとき | |
dblclick | マウスでダブルクリック | |
drag | ドラッグされた | |
dragend | ドラッグが終わった | |
dragenter | ドロップ目標にドラッグされた | |
dragleave | ドロップ目標からドラッグが外れた | |
dragover | ドロップ目標上にドラッグされている | |
dragstart | ドラッグが開始された | |
drop | ドロップ目標にドラッグがドロップされた | |
mousedown | マウスボタンが押された | |
mousemove | マウスポインタが要素の上を移動 | |
mouseout | マウスポインタが要素から離れたとき | |
mouseover | マウスポインタが要素に乗ったとき | |
mouseup | マウスボタンが離された | |
mousewheel | マウスホイールを回転させた | |
キー | keydown | ユーザーがキーを押した |
keypress | ユーザーがキーを押して離した | |
keyup | ユーザーがキーを離した | |
リソース | abort | リソースのロードが中断された |
error | リソースのロード中にエラーが発生した | |
タッチ | touchstart | 指が置かれた |
touchmove | 指がドラッグされた | |
touchend | 指が離れた | |
スマホ | orientationchange | スマホの画面が縦横変わる |
Copyright (C) 2012 山本ワールド All Rights Reserved.