イベントオブジェクト
window.event	onClick="..." などのイベントハンドラの中で参照できるイベントオブジェクト。
window.event.keyCode	keyCode は、イベントが発生した時に、キーボード上のどのキーが押されていたかを示す値（ASCIIコード）。
window.event.shiftKey	shiftKeyは、イベントが発生した時に、Shiftキーが押されていたかどうかを示す真偽値。
window.event.ctrlKey	ctrlKeyは、イベントが発生した時に、Ctrlキーが押されていたかどうかを示す真偽値。
window.event.altKey	altKey は、イベントが発生した時に、Altキーが押されていたかどうかを示す真偽値。
window.event.button	button は、イベントが発生した時に、マウスのどのボタンが押されていたかを示す値。 1 は左ボタン 2 は右ボタン 4 は真中ボタン 2 つ以上のボタンが押された場合はその合計値。
window.event.screenX	screenX、screenY はスクリーン上でイベントが発生した場所
window.event.screenY	screenX、screenY はスクリーン上でイベントが発生した場所
window.event.clientX	clientX、clientY はクライアント領域（ウィンドウ）上の座標でイベントが発生した場所
window.event.clientY	clientX、clientY はクライアント領域（ウィンドウ）上の座標でイベントが発生した場所
window.event.x	x、y は配置された親要素（通常は BODY 要素）上の座標でイベントが発生した場所
window.event.y	x、y は配置された親要素（通常は BODY 要素）上の座標でイベントが発生した場所
window.event.offsetX	offsetX、offsetY は、イベントが発生した場所のクリックした要素上の座標
window.event.offsetY	offsetX、offsetY は、イベントが発生した場所のクリックした要素上の座標
window.event.srcElement	srcElement は、このイベントが発生した要素を示すオブジェクト。
window.event.fromElement	fromElement は、onMouseOver および onMouseOut イベントが発生した際の、マウスの移動元の要素を示すオブジェクト。
window.event.srcFilter	onFilterChange イベントが発生した際の、発生元フィルタオブジェクト。
window.event.cancelBubble	このイベントを上位の要素のイベントハンドラに渡すかどうかを示す真偽値。
window.event.returnValue = value	このイベントハンドラの戻り値を設定。「return value;」と同等。 false を代入することは、クリック時のイベント本来の動作を抑制する。
window.event.reason	データソースオブジェクトにおけるデータ転送の状態。 0 は成功。 1 は中断。 2 は失敗。

記述例

Back

発生したイベント情報を取得する方法

発生したイベント情報を取得する方法のメモ。
マウスをクリックしたり、動かしたり、右クリックしたりなど、
Web上で行われた動作を検知することで、
イベントに対してプログラムを記述することができる。

IE

IEの場合、引数などに何も指定しなくても「window.event」オブジェクトを参照することで、イベントにアクセスできるようになっている。

サンプルコード

window.event.プロパティ名;

Gecko系のブラウザ

ブラウザ：「FireFox」「Netscape」

イベントは、自動的に第一引数に格納されて関数に渡される。

引数がイベントのみの場合

関数の記述のときに、引数に「e」（イベント）を記述するだけ。
関数を呼び出すときには、引数を記述しなくても、「e」にイベントオブジェクトが格納されるので、関数内で「e」を参照することができる。

関数の記述

function 関数名(e){
var GetPropaty=e.プロパティ;
}

呼び出し方法

関数名(event)；

イベント以外に引数を渡したい場合

イベント以外に引数を指定したい場合、関数の記述時に、下記のように複数の引数を記述する必要がある。
イベント「e」は、第一引数にする。

ポイントは、関数を呼び出すときの「引数」の指定方法。
イベントの場所には「event」と記述しなければならない。

関数の記述

function 関数名(e,変数名,変数名,・・・){
var GetPropaty=e.プロパティ;
}

呼び出し方法

関数名（event,引数,引数,・・・・）；

Back

ページ読み込み完了時にJavascriptを実行させる方法

Webページを読み込んだ直後に、「Javascript」を実行させたい時のメモ。
Webページを読み込んだ直後に「Javascript」を実行させには、イベントハンドラの「onload」を利用する。
「onload」は、ページの読み込みが完了した直後に「Javascript」を実行するためのイベントハンドラ。
比較的よく利用されるイベントハンドラです。

Webページを読み込んだ直後には、取得できない値などがあるので、
最初は、「alert」関数を使用して、「onload」が機能するか確認する方が無難。

ページ読み込み時に実行するjavascriptの指定方法

「onload」イベント
jQueryの「ready」メソッド

「onload」イベント

「onload」イベントを利用して、ページ読み込み時に、「javascript」を実行させる方法。

window.onload = function(){
// ページ読み込み時に実行したい処理
}

jQueryのreadyメソッド

ライブラリとしてjQueryを使用している場合、「ready」メソッドで、ページ読み込み時に「javascript」を実行する方法がある。

$(document).ready( function(){
// ページ読み込み時に実行したい処理
});

jQueryのreadyメソッドの省略表記

$(function(){
// ページ読み込み時に実行したい処理
});

onloadイベントとjQueryのreadyメソッドの違い

ただし、onloadイベントとjQueryのreadyメソッドは
全く同じ動きをするというわけではありませんので、使用する際には注意が必要です。

処理を実行するタイミングの違い

jQueryのready()メソッド	DOMツリーの構築が完了した時点で処理を実行する。
onloadイベント	DOMツリーの構築の完了に加え、画像などの関連データの読み込みなど、すべてが完了した後に処理を実行する。

処理の順序の注意点

指定順序に関わらず、「jQuery」の処理が先に実行され、すべての読み込みが完了した後に、「javascript」が実行される。

下記のようにコードを記述しても、「jQuery」の処理が先に実行される。

window.onload = function(){
alert('javascript');
}

$(document).ready( function(){
alert('jQuery');
});

指定が複数ある場合の違い

「onload」イベントは最後に指定したものだけが実行される。
jQueryの「ready」メソッドは、定したもの全てが、指定順に実行される。

Back

マウスの位置を確認する方法

マウス位置に何かを表示する時などに、マウス位置を取得する時に使える方法。
「イベントオブジェクト」を利用するので、関数を呼び出す時に、引数に、イベントオブジェクトを格納する「e」「event」という引数を、最初に記述する。
そうすると、関数内で、マウスイベントの情報を取得することができる。
引数は、他の引数も渡せるので、「イベントオブジェクト」の引数を先頭にして、その後に、複数の引数を記述することも可能。

イベントオブジェクトの取得方法。

javascriptで、マウスの位置を確認するには、イベントオブジェクトを利用して確認する。

IEは、「window.event」でイベントオブジェクトを取得できる。
他のブラウザは、「関数(e){プログラム}」で、「e」引数にイベントオブジェクトが代入される。

IEと他のブラウザに対応させるために、「if (!e) e = window.event;」でイベントオブジェクトを「e」に代入させることで、IEブラウザに対応させる。

イベントのみで引数なしの関数

function 関数名(e){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;
}

イベントのみで引数なしの関数呼び出し

関数名(event);

//クリックしたときに実行される
document.onmousedown = 関数名;

//マウスを移動させると実行される
document.onmousemove = 関数名;

イベントと複数引数の関数

function 関数名(e,変数名,変数名,・・・・){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;

}

イベントと複数引数の関数の呼び出し

関数名(event,引数,引数,・・・・);

//クリックしたときに実行される
document.onmousedown = 関数名(event,引数,引数,・・・・);

//マウスを移動させると実行される
document.onmousemove = 関数名(event,引数,引数,・・・・);

イベントのプロパティ

プロパティ名	方	説明
screenX	Number	モニタのスクリーン領域の左上を原点(0)とした水平位置（ x 座標）
screenY	Number	モニタのスクリーン領域の左上を原点(0)とした垂直位置（ y 座標）
clientX	Number	ブラウザのクライアント領域の左上を原点(0)とした水平位置（ x 座標）
clientY	Number	ブラウザのクライアント領域の左上を原点(0)とした垂直位置（ y 座標）
offsetX	Number	イベントが発生した要素上のX座標
offsetY	Number	イベントが発生した要素上のY座標

Back

スクロール位置を確認する方法

スクロール位置を確認するとは

画像などを大きくして表示させたい時などに、スクロール位置を取得して、画像表示の位置を指定する時に使われる。
使える手法なので覚えておくと便利。

サンプルコード

画面をクリックした時に、実行されるJavascriptコード。

function MouseAction(e) {

標準モード
var ScrollTop_A=document.documentElement.scrollTop;
var ScrollLeft_A=document.documentElement.scrollLeft;

互換モード
var ScrollTop_B=document.body.scrollTop;
var ScrollLeft_B=document.body.scrollLeft;

var Get_ScrollTop=document.documentElement.scrollTop;
window.document.getElementById('id名').innerHTML=Get_ScrollTop+"px";
var Get_ScrollLeft=document.documentElement.scrollLeft; window.document.getElementById('id名').innerHTML=Get_ScrollLeft+"px";

}
document.onmousedown = MouseAction;

ブラウザ対応

FireFox	document.documentElement
IE ver.11	document.documentElement
Chrome	document.body
Safari	document.body

Back