JavaScript プログラミング講座

 

イベントについて

 


■ DOM Level 2 Event Model について


標準化されたイベント駆動の仕組みを利用する事ができます。
 
ブラウザが、DOM Level 2 に対応している必要があります。
 
W3Cにより、仕様が勧告されています。
 
http://www.w3.org/TR/DOM-Level-2-Events/ (DOM Level 2 Events)
 
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM Level 3 Events) (Working Draft)
 
http://www.w3.org/TR/dom/#events (DOM4) (Working Draft)
 
Internet Explorer 8 以前では利用できません。
 
かわりに、アタッチイベントを使用します。
 

■イベントについて


様々な任意の動作タイミングが、イベントとして定義されています。
 
例えば、「マウス操作」「キーボード操作」といったタイミングです。
 

■ EventTarget インターフェースについて


EventTarget は、イベントを発行する事ができます。
 
イベントは、主にシステム側から発行されます。
 
自ら発送者として、イベントを供給することもできます。
 
■ DOM における実装
 
DOM オブジェクトは、必ず EventTarget インターフェースが実装されています。
 
また、任意のクラスに、EventTarget インターフェースが実装されている場合、何らかのイベントが供給されているでしょう。
 
例えば、XMLHttpRequest などがあります。
 
■供給されるイベントの種類について
 
供給されるイベントの種類については、以下のページが参考になります。
 
 

■ EventListener について


EventListener は、「イベントを聞く人」を意味します。
 
EventTarget から発行されるイベントの通知を、受け取りたい側に相当します。
 
EventListener というインターフェースがありますが、必須ではありません。
 
イベントリスナーという用語は、広い意味を持ちます。
 

■ EventTarget とリスナーの関係

 
リスナーについて
 
あなたは、イベント通知を受け取りたいプログラマです。
 
あなたは、EventTarget に、コールバック関数を登録する事ができます。
 
コールバック関数は、ハンドラ(処理部)と呼ばれます。
 
コールバック関数は、EventTarget のリスナーとなります。
 
1つの EventTarget に対して、複数のコールバック関数を登録する事もできます。
 
イベントのディスパッチについて
 
EventTarget は、イベントを送出する事ができます。
 
イベントの発行イベントの発火とも呼ばれます。
 
EventTarget は、登録されたコールバック関数を実行します。
 
こうしてあなたは、EventTarget からのイベント通知を受け取る事ができます。
 
コールバック関数の引数から、Event オブジェクトが得られます。
 

■イベントフェーズについて

 
大抵のイベントは、DOM ツリーと密接に関係しています。
 
■バブルズ(Bubbles)について
 
大抵のイベントは、バブルズ(Bubbles)に対応しています。
 
対象本人だけでなく、祖先にも通知されます。
 
バブルズに対応していないイベントは、対象本人にのみ通知されます。
 
例えば、onclick イベントは、バブルズに対応しています。
 
例えば、onfocus イベントは、バブルズに対応していません。
 
■イベントフェーズについて
 
イベント通知の伝達順序として、以下の段階があります。
 
1.キャプチャ段階
 
2.ターゲット段階
 
3.バブリング段階
 
バブルズに対応しているイベントは、キャプチャ段階 → ターゲット段階 → バブリング段階 という順序で伝達されます。
 
バブルズに対応していないイベントは、ターゲット段階のみ実行されます。
 
1.キャプチャ段階
 
キャプチャ段階では、ウィンドウから子孫に向かって順番に実行されます。
 
「ウィンドウ」から「ターゲットの直前」まで実行されます。
 
任意のリスナーにとって、子孫にイベントが発生した事がわかります。
 
下の図であれば、1~5に登録したリスナーに相当します。
 
 
2.ターゲット段階
 
ターゲット段階は、対象となるオブジェクトに到達したときに実行されます。
 
「ターゲット」が実行されます。
 
任意のリスナーにとって、自身にイベントが発生した事がわかります。
 
3.バブリング段階
 
バブリング段階では、子孫からウィンドウに向かって順番に実行されます。
 
「ターゲットの直後」から「ウィンドウ」まで実行されます。
 
上に戻っていく流れが、バブル(泡)となります。
 
任意のリスナーにとって、子孫にイベントが発生した事がわかります。
 
下の図であれば、1~5に登録したリスナーに相当します。
 
 
■イベントフェーズの流れを確認する
 
マウスボタンを押した時のイベントフェーズの流れを確認する

<html>
  <body>

    <div style="width:400px; height:300px; background:#fcc;">
	    <span style="font-size:32px;">あいうえお</span>
    </div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}


	// イベントリスナーに対応している
	if(window.addEventListener){

		// ------------------------------------------------------------
		// マウスボタンを押したときに実行される関数
		// ------------------------------------------------------------
		function MouseDownFunc(e){
			var current = e.currentTarget;
			var target = e.target;
			console.log("カレント:" + current + "(" + current.nodeName + ")");
			console.log("ターゲット:" + target + "(" + target.nodeName + ")");
			console.log("イベントフェーズ:" + e.eventPhase);
			console.log("---");
		}


		// ------------------------------------------------------------
		// すべてのフェーズでリッスンを開始
		// ------------------------------------------------------------
		// ウィンドウにリスナーを登録
		window.addEventListener("mousedown",MouseDownFunc,true );
		window.addEventListener("mousedown",MouseDownFunc,false );

		// ドキュメントにリスナーを登録
		document.addEventListener("mousedown",MouseDownFunc,true );
		document.addEventListener("mousedown",MouseDownFunc,false );

		// コールバック関数を使って、ドキュメントのすべての子孫を検索
		DomNodeFindAllDescendants(document,function (node){

			// ドキュメントの子孫にリスナーを登録
			node.addEventListener("mousedown",MouseDownFunc,true );
			node.addEventListener("mousedown",MouseDownFunc,false );

			// 検索を継続
			return null;
		});

	}
    //-->
    </script>

  </body>
</html>
 
■イベントフェーズのルート(最上位)について
 
イベントフェーズの最上位は、Window オブジェクトです。
 
ただし、レガシーなイベントでは、Window オブジェクトまで伝達されません。
 
イベント属性を利用する場合、互換性を考慮して、document を利用するのが無難です。
 
addEventListener() を使用した場合は、必ず Window オブジェクトまで伝達されます。
 
■イベント属性のフェーズについて
 
イベント属性のフェーズは、ターゲット段階 → バブリング段階 という流れで実行されます。
 
キャプチャ段階はありません。
 


 

Event クラスについて

 
 


■ Event インターフェースについて

 
Event には、基本的なイベント情報が格納されます。
 
システムがイベントを発行する場合、システムが Event オブジェクトを生成します。
 
リスナーは、EventTarget に登録したコールバック関数の引数から、Event オブジェクトを受け取る事ができます。
 
イベントの種類によっては、Event インターフェースから派生して、専用のプロパティやメソッドを持つものもあります。
 
■ Event クラスの種類
 
Event クラスの種類については、以下のページが参考になります。
 
http://www.w3.org/TR/DOM-Level-2-Events/events.html (DOM Events Level2)
 
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM Events Level3) (Working Draft)
 
http://www.w3.org/TR/dom/#events (DOM4 Events)
 

■ Event インターフェースのプロパティについて

 
Event インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
typeStringイベント名を取得する。
currentTargetObjectイベント伝達中における現在の場所を意味する。
イベントリスナー(現在呼び出されているコールバック関数自身)の登録時に指定した EventTarget オブジェクトを指す。
targetObjectイベントの発生場所を意味する。ターゲット段階で動作する EventTarget オブジェクトを指す。
eventPhaseNumberイベントフェーズの種類。
bubblesBooleantrue の場合、バブルズに対応している。
cancelableBooleantrue の場合、デフォルトの動作のキャンセルに対応している。
timeStampNumberタイムスタンプ
 
■ eventPhase プロパティ
 
eventPhase プロパティからは、以下の定数が取得できます。
 
イベントフェーズについては、こちらで解説しています。
 
定数番号説明
Event.CAPTURING_PHASE1キャプチャ段階
Event.AT_TARGET2ターゲット段階
Event.BUBBLING_PHASE3バブリング段階
 

■ Event インターフェースのメソッドについて

 
Event インターフェースには、以下のメソッドがあります。(一部抜粋)
 
メソッド名 説明
preventDefault() デフォルトの動作をキャンセルします。
stopImmediatePropagation() イベント通知の伝達を終了します。即時中止します。
stopPropagation() イベント通知の伝達を終了します。同じイベントに他のリスナーが登録されている場合、それらの処理が終わるまで中断しません。
 

■デフォルトの動作をキャンセルする

 
■デフォルトの動作の無効化について
 
イベントの種類によっては、キャンセルに対応している場合があります。
 
任意の動作が行われる直前に、イベントが発行されます。
 
リスナー側で、任意の動作をキャンセルするか選択する事ができます。
 
例えば、onclick や onkeypress イベントなどが対応しています。
 
■イベントがキャンセルに対応しているか調べる
 
cancelable プロパティを使用します。
 
true なら、キャンセル可能です。
 
■デフォルトの動作をキャンセルする
 
preventDefault() メソッドを使用します。
 
Event.preventDefault ( ) :Void
引数 Voidなし
戻り値 Voidなし
 
■リスナーがキャンセルしたかを調べる(発行者側)
 
defaultPrevented プロパティを使用します。
 
true なら、リスナーがキャンセルしています。
 
■使用例
 
テキストエリアへの入力をキャンセルする

// エレメントを作成する
var element = document.createElement("textarea");

// BODY のノードリストに登録する
document.body.appendChild(element);

// スタイルを設定
element.style.cssText = "width:400px; height:300px;";

// イベントリスナーに対応している
if(element.addEventListener){

	// キーボードを押した時に実行されるイベント
	element.addEventListener("keypress",function (e){

		// キャンセルに対応しているか
		var cancelable = e.cancelable;

		// デフォルトの動作をキャンセル
		e.preventDefault();

		// 出力テスト
		console.log("キャンセルに対応しているか:" + cancelable);
	});
}
 

■イベント通知の伝達を終了する(即時中止)


stopImmediatePropagation() メソッドを使用します。
 
このメソッドは、イベント通知の伝達を即時中断します
 
Event.stopImmediatePropagation ( ) :Void
引数 Voidなし
戻り値 Voidなし
 
■動作を確認する
 
イベントの伝達を即時終了する

<html>
  <body>

    <div style="width:400px; height:300px; background:#fcc;">
	    <span style="font-size:32px;">あいうえお</span>
    </div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}


	// イベントリスナーに対応している
	if(window.addEventListener){

		// ------------------------------------------------------------
		// マウスボタンをクリックしたときに実行される関数
		// ------------------------------------------------------------
		function MouseClickFunc(e){
			var current = e.currentTarget;
			console.log("カレント:" + current + "(" + current.nodeName + ")");
			console.log("イベントフェーズ:" + e.eventPhase);
			console.log("---");

			// ターゲットフェーズに到達した
			if (e.eventPhase == Event.AT_TARGET) {
				// イベント通知の伝達を直ちに終了する
				e.stopImmediatePropagation();
			}
		}


		// ------------------------------------------------------------
		// すべてのフェーズでリッスンを開始
		// ------------------------------------------------------------
		// ウィンドウにリスナーを登録
		window.addEventListener("click",MouseClickFunc,true );
		window.addEventListener("click",MouseClickFunc,false );

		// ドキュメントにリスナーを登録
		document.addEventListener("click",MouseClickFunc,true );
		document.addEventListener("click",MouseClickFunc,false );

		// コールバック関数を使って、ドキュメントのすべての子孫を検索
		DomNodeFindAllDescendants(document,function (node){

			// ドキュメントの子孫にリスナーを登録
			node.addEventListener("click",MouseClickFunc,true );
			node.addEventListener("click",MouseClickFunc,false );

			// 検索を継続
			return null;
		});
	}
    //-->
    </script>

  </body>
</html>
 

■イベント通知の伝達を終了する


stopPropagation() メソッドを使用します。
 
複数のリスナーが登録されている場合、それらの処理が終わるまでは中断しません。
 
Event.stopPropagation ( ) :Void
引数 Voidなし
戻り値 Voidなし
 
■動作を確認する
 
イベントの伝達を終了する

<html>
  <body>

    <div style="width:400px; height:300px; background:#fcc;">
	    <span style="font-size:32px;">あいうえお</span>
    </div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// DOM オブジェクトのすべての子孫を検索する関数
	// ------------------------------------------------------------
	function DomNodeFindAllDescendants(node,func){
		function f(n){
			var nodes = n.childNodes;
			var i;
			var num = nodes.length;
			var a = new Array();
			for(i=0;i < num;i++){ a[i] = nodes[i]; }
			for(i=0;i < num;i++){
				node = func(a[i]);
				if(node){ return node; }
				node = f(a[i]);
				if(node){ return node; }
			}
			return null;
		}
		return f(node);
	}


	// イベントリスナーに対応している
	if(window.addEventListener){

		// ------------------------------------------------------------
		// マウスボタンをクリックしたときに実行される関数
		// ------------------------------------------------------------
		// リスナーA
		function MouseClickFuncA(e){
			var current = e.currentTarget;
			console.log("リスナーA");
			console.log("カレント:" + current + "(" + current.nodeName + ")");
			console.log("イベントフェーズ:" + e.eventPhase);
			console.log("---");

			// ターゲットフェーズに到達した
			if (e.eventPhase == Event.AT_TARGET) {
				// イベント通知の伝達を終了する
				e.stopPropagation();
			}
		}

		// リスナーB
		function MouseClickFuncB(e){
			var current = e.currentTarget;
			console.log("リスナーB");
			console.log("カレント:" + current + "(" + current.nodeName + ")");
			console.log("イベントフェーズ:" + e.eventPhase);
			console.log("---");
		}


		// ------------------------------------------------------------
		// すべてのフェーズでリッスンを開始
		// ------------------------------------------------------------
		// ウィンドウにリスナーAを登録
		window.addEventListener("click",MouseClickFuncA,true );
		window.addEventListener("click",MouseClickFuncA,false );

		// ウィンドウにリスナーBを登録
		window.addEventListener("click",MouseClickFuncB,true );
		window.addEventListener("click",MouseClickFuncB,false );

		// ドキュメントにリスナーAを登録
		document.addEventListener("click",MouseClickFuncA,true );
		document.addEventListener("click",MouseClickFuncA,false );

		// ドキュメントにリスナーBを登録
		document.addEventListener("click",MouseClickFuncB,true );
		document.addEventListener("click",MouseClickFuncB,false );

		// コールバック関数を使って、ドキュメントのすべての子孫を検索
		DomNodeFindAllDescendants(document,function (node){

			// ドキュメントの子孫にリスナーAを登録
			node.addEventListener("click",MouseClickFuncA,true );
			node.addEventListener("click",MouseClickFuncA,false );

			// ドキュメントの子孫にリスナーBを登録
			node.addEventListener("click",MouseClickFuncB,true );
			node.addEventListener("click",MouseClickFuncB,false );

			// 検索を継続
			return null;
		});
	}
    //-->
    </script>

  </body>
</html>
 

■ Event オブジェクトを生成する (Level 3)

 
new 演算子を使って、Event コンストラクタをインスタンス化します。
 
Event コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
Event オブジェクトの生成と、初期値の設定を同時に行う事ができます。
 
new Event ( "イベント名" , EventInit ) :Event
第01引数 Stringイベント名を指定
第02引数(略可)EventInitEventInit オブジェクトを指定。
戻り値 EventEvent オブジェクト
 
イベントオブジェクトを作成

// イベントオブジェクトを作成
var event_obj = new Event("myCustomEvent");
 
■ EventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
 
EventInit オブジェクトを作成

// ------------------------------------------------------------
// EventInit オブジェクトを作成
// ------------------------------------------------------------
var event_init = {

	// バブリングイベントに対応するか
	bubbles:true,

	// キャンセルに対応するか
	cancelable:true

};

// ------------------------------------------------------------
// イベントオブジェクトを作成
// ------------------------------------------------------------
var event_obj = new Event("myCustomEvent",event_init);
 

■ Event オブジェクトを初期化する (Level 2)

 
Event オブジェクトを初期化するには、initEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、古いブラウザでも利用可能ですが、将来的には廃止予定です。
 
Event コンストラクタを優先的に使用します。
 
Event.initEvent ( type , bubbles , cancelable ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
戻り値 Voidなし
 
Event オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// Event オブジェクトを作成
// ------------------------------------------------------------
var event_obj = document.createEvent("Event");

// ------------------------------------------------------------
// Event オブジェクトに初期値を設定する
// ------------------------------------------------------------
event_obj.initEvent(
	"myCustomEvent",
	false,
	false
);
 
■イベント名について (Event.type)
 
発行したいイベント名を指定します。
 
カスタムイベント "myCustomEvent" を発行する例です。
 
カスタムイベントを発行する

// イベントリスナーに対応している
if(document.addEventListener){

	// ------------------------------------------------------------
	// カスタムイベントをリッスンする
	// ------------------------------------------------------------
	document.addEventListener("myCustomEvent",function (e) {
		console.log("イベントの通知を受け取った");
	});


	// ------------------------------------------------------------
	// イベントオブジェクト
	// ------------------------------------------------------------
	// イベントオブジェクトを作成
	var event_obj = document.createEvent("Event");

	// 基本イベントを初期化
	event_obj.initEvent("myCustomEvent",false,false);


	// ------------------------------------------------------------
	// EventTarget から送出
	// ------------------------------------------------------------
	document.dispatchEvent(event);

}
 
■バブリングイベントの対応について (Event.bubbles)

バブリングイベントに対応する場合、true を指定します。
 
デフォルトは、false です。
 
バブリングイベントについては、こちらで解説しています。
 
バブリングイベントの流れを確認する

// ------------------------------------------------------------
// DOM オブジェクトのすべての子孫を検索する関数
// ------------------------------------------------------------
function DomNodeFindAllDescendants(node,func){
	function f(n){
		var nodes = n.childNodes;
		var i;
		var num = nodes.length;
		var a = new Array();
		for(i=0;i < num;i++){ a[i] = nodes[i]; }
		for(i=0;i < num;i++){
			node = func(a[i]);
			if(node){ return node; }
			node = f(a[i]);
			if(node){ return node; }
		}
		return null;
	}
	return f(node);
}


// イベントリスナーに対応している
if(window.addEventListener){

	// ------------------------------------------------------------
	// エレメントA
	// ------------------------------------------------------------
	// エレメントを作成する
	var element_a = document.createElement("div");
	element_a.name = "ElementA";

	// BODY のノードリストにエレメントAを登録する
	document.body.appendChild(element_a);


	// ------------------------------------------------------------
	// エレメントB
	// ------------------------------------------------------------
	// エレメントを作成する
	var element_b = document.createElement("div");
	element_b.name = "ElementB";

	// エレメントAのノードリストにエレメントBを登録する
	element_a.appendChild(element_b);


	// ------------------------------------------------------------
	// エレメントC
	// ------------------------------------------------------------
	// エレメントを作成する
	var element_c = document.createElement("div");
	element_c.name = "ElementC";

	// エレメントBのノードリストにエレメントCを登録する
	element_b.appendChild(element_c);


	// ------------------------------------------------------------
	// マウスボタンをクリックしたときに実行される関数
	// ------------------------------------------------------------
	function MouseClickFunc(e) {
		var current = e.currentTarget;
		console.log("カレント:" + current + "(" + current.name + ")");
		console.log("イベントフェーズ:" + e.eventPhase);
		console.log("---");
	}


	// ------------------------------------------------------------
	// すべてのフェーズでリッスンを開始
	// ------------------------------------------------------------
	// ウィンドウにリスナーを登録
	window.addEventListener("click",MouseClickFunc,true );
	window.addEventListener("click",MouseClickFunc,false );

	// ドキュメントにリスナーを登録
	document.addEventListener("click",MouseClickFunc,true );
	document.addEventListener("click",MouseClickFunc,false );

	// コールバック関数を使って、ドキュメントのすべての子孫を検索
	DomNodeFindAllDescendants(document,function (node){

		// ドキュメントの子孫にリスナーを登録
		node.addEventListener("click",MouseClickFunc,true );
		node.addEventListener("click",MouseClickFunc,false );

		// 検索を継続
		return null;
	});


	// ------------------------------------------------------------
	// マウスイベント
	// ------------------------------------------------------------
	// マウスイベントオブジェクトを作成
	var mouse_event = document.createEvent("MouseEvent");

	// マウスイベントオブジェクトを初期化
	mouse_event.initMouseEvent("click",true,false,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);


	// ------------------------------------------------------------
	// エレメントCの EventTarget から送出
	// ------------------------------------------------------------
	element_c.dispatchEvent(mouse_event);
}
 
■キャンセルの対応について (Event.cancelable)

キャンセルに対応する場合、true を指定します。
 
デフォルトは、false です。
 
イベントリスナー側のキャンセルについては、こちらで解説しています。
 
キャンセルの流れを確認する

// ------------------------------------------------------------
// テキストエリア
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("textarea");

// BODY のノードリストに登録する
document.body.appendChild(element);

// スタイルを設定
element.style.cssText = "width:400px; height:300px;";

// イベントリスナーに対応している
if(element.addEventListener){

	// カスタムイベントのリッスンを開始する
	element.addEventListener("myTextAreaChanging",function (e){

		console.log("リスナーが受け取ったデータ:" + e.detail.text);

		// キャンセルに対応しているか
		if(e.cancelable){

			// デフォルトの動作をキャンセル
			e.preventDefault();

		}

	});
}


// ------------------------------------------------------------
// 変更の直前通知を目的としたカスタムイベント
// ------------------------------------------------------------
// マウスイベントオブジェクトを作成
var custom_event = document.createEvent("CustomEvent");

// マウスイベントオブジェクトを初期化
custom_event.initCustomEvent("myTextAreaChanging",false,true,{text:"表示テスト"});


// ------------------------------------------------------------
// テキストエリアの EventTarget から送出
// ------------------------------------------------------------
var result = element.dispatchEvent(custom_event);
if(result){
	element.value = custom_event.detail.text;
}else{
	console.log("リスナーがキャンセルした:" + custom_event.defaultPrevented);
}
 


 

EventTarget クラスについて

 
 


■ EventDispatcher クラスのメソッドについて

 
メソッド名 説明
addEventListener() リスナーを登録して、イベントの通知を受け取る。
removeEventListener() リスナーを除外して、イベントの通知を止める。
dispatchEvent() イベントを発行する。
 


 

イベントの通知を受け取る

 
 


■コールバック関数を登録して、イベントの通知を受け取る


イベントの通知を受け取るには、 addEventListener メソッドを使用します。
 
EventTarget.addEventListener ("イベント名" , コールバック関数 , キャプチャ段階で受け取るか? ) :Void
第01引数 Stringイベント名を指定
第02引数 Objectコールバック関数を指定。もしくは、EventListener オブジェクトを指定。
第03引数(略可)Booleantrue の場合、キャプチャー段階やターゲット段階でイベントの通知を受け取る。
false の場合、ターゲット段階やバブリング段階でイベントの通知を受け取る。(デフォルトは false)
戻り値 Voidなし
 
■第01引数 イベント名

監視したいイベントの名称を指定します。
 
イベントハンドラ名を使用する場合、"on" という文字を除去します。
 
例えば、onmousedown イベントを使用する場合は、"mousedown" を指定します。
 
■第02引数 コールバック関数
 
EventTarget がイベントを発行したときに、実行して欲しいコールバック関数を指定します。
 
コールバック関数の、第01引数から、Event オブジェクトが得られます。
 
Event インターフェースについては、こちらで解説しています。
 
マウスボタンをクリックしたときに実行されるイベント

// マウスボタンをクリックしたときに実行される関数
function MouseClickFunc(e){
	// 出力テスト
	console.log(e);
}

// イベントリスナーに対応している
if(document.addEventListener){

	// イベントのリッスンを開始する
	document.addEventListener("click",MouseClickFunc);

}
 
■第02引数 EventListener オブジェクト
 
EventListener オブジェクトを渡すこともできます。
 
handleEvent プロパティに、コールバック関数をセットします。
 
マウスボタンをクリックしたときに実行されるイベント

// listener用オブジェクトを作成
var event_listener = new Object();

// マウスボタンをクリックしたときに実行される関数
event_listener.handleEvent = function (e){
	// 出力テスト
	console.log(e);
};

// イベントリスナーに対応している
if(document.addEventListener){

	// イベントのリッスンを開始する
	document.addEventListener("click",event_listener);

}
 
■第03引数 イベントフェーズ
 
true を指定すると、キャプチャ段階ターゲット段階で、イベント通知を受け取ることができます。
 
false を指定すると、ターゲット段階バブリング段階で、イベント通知を受け取ることができます。
 
デフォルトは、false です。
 
イベントフェーズについては、こちらで解説しています。
 
イベントの種類によっては、キャプチャ段階やバブリング段階で受け取れない場合があります。
 
キャプチャ段階と、バブリング段階の両方でイベントの通知を受け取りたい場合は、第03引数を変更して、2 回登録します
 
マウスボタンをクリックしたか、すべてのフェーズで監視する

// ------------------------------------------------------------
// エレメントを作成して配置
// ------------------------------------------------------------
// エレメントを作成する
var element = document.createElement("div");

// スタイルを設定
element.style.cssText = "width:400px; height:300px; background:#fcc;";

// BODY のノードリストに登録する
document.body.appendChild(element);


// ------------------------------------------------------------
// マウスボタンをクリックしたときに実行される関数
// ------------------------------------------------------------
function MouseClickFunc(e){
	console.log("マウスボタンをクリックした");
	console.log("イベントフェーズ:" + e.eventPhase);
	console.log("---");
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// BODY エレメントを取得する
var body_element = document.body;

// イベントリスナーに対応している
if(body_element.addEventListener){

	// キャプチャ段階やターゲット段階でリッスンする
	body_element.addEventListener("click",MouseClickFunc,true );

	// ターゲット段階やバブリング段階でリッスンする
	body_element.addEventListener("click",MouseClickFunc,false );
}
 
■イベントリスナーの多重登録に注意

第01~03引数の指定がすべて同一である場合、リスナーの登録を試みても2重に登録されることはありません。
 
第01~03引数の指定に1つでも相違がある場合、リスナーの登録を試みるたびに多重に登録されていきます
 
第02引数に、直接無名関数を渡している場合は、新規に関数を生成しているので注意します。
 

■イベントの通知の受け取りを止める


イベントの通知の受け取りを止めるには、removeEventListener を使用します。
 
addEventListener メソッドで使用した、第01~03引数と同じパラメータを指定します。
 
EventTarget.removeEventListener ("イベント名" , コールバック関数 , キャプチャ段階で受け取るか? ) :void
第01引数 String登録時に指定した、イベント名。
第02引数 Object登録時に指定した、コールバック関数。もしくは、EventListener オブジェクト。
第03引数(略可)Boolean登録時に指定した、イベントフェーズ。(デフォルトは false)
戻り値 voidなし
 
イベントの通知の受け取りを止める

// ------------------------------------------------------------
// マウスボタンをクリックしたときに実行される関数
// ------------------------------------------------------------
function MouseClickFunc(e){
	console.log("マウスボタンをクリックした");
}


// ------------------------------------------------------------
// イベントリスナー
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){
	// イベントのリッスンを開始する
	document.addEventListener("click",MouseClickFunc );
}

// イベントリスナーに対応している
if(document.removeEventListener){
	// イベントのリッスンを終了する
	document.removeEventListener("click",MouseClickFunc );
}
 
■無名関数を使ったイベントリスナーの登録を解除する
 
無名関数を使ったイベントリスナーの登録を解除するには、無名関数内でリムーブ処理を行う必要があります。
 
関数内から、自身の関数への参照を取得する為には、必ず関数名を記述します。
 
関数リテラルで指定した関数名は、関数リテラル内でのみ利用可能です。
 
arguments.callee プロパティから、自身の関数を取得する事もできます。
 
ただし、strict モードでは、利用できません。
 
無名関数を使ったイベントのリッスンを終了する

// イベントリスナーに対応している
if(document.addEventListener){

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	document.addEventListener("click",function callee(e){

			console.log("マウスボタンをクリックした");

			// イベントのリッスンを終了する
			document.removeEventListener("click" , callee);

	});
}
 
イベント名を取得するには、type プロパティを使用します。
 
イベントリスナー登録時に指定した EventTarget を取得するには、currentTarget プロパティを使用します。
 
イベントフェーズの取得はできないので、第03引数を指定している場合は注意します。
 
汎用的な記述方法で、イベントのリッスンを終了する

// イベントリスナーに対応している
if(document.addEventListener){

	// ------------------------------------------------------------
	// イベントのリッスンを開始する
	// ------------------------------------------------------------
	document.addEventListener("click",function callee(e){

			console.log("マウスボタンをクリックした");

			// イベントのリッスンを終了する(第03引数に注意)
			e.currentTarget.removeEventListener(e.type , callee);

	});
}
 
■イベントリスナーからの参照について

EventTarget への参照が絶たれた場合、イベントリスナーを登録したままの状態であっても、ガベージコレクションが発生すると EventTarget は消滅します
 
EventTarget が消滅すると、イベントリスナーの登録は、自動的に解除されます。
 
マウスをクリックして、リスナーを登録したまま EventTarget を消滅させる(注.タスクマネージャでメモリ使用量の変化を確認します)

// イベントリスナーに対応している
if(document.addEventListener){

	// ------------------------------------------------------------
	// 配列を作成
	// ------------------------------------------------------------
	var ary = new Array();


	// ------------------------------------------------------------
	// 1 ミリ秒ごとに実行する
	// ------------------------------------------------------------
	setInterval(function (){

		var i;
		var num = 100;
		for(i=0;i < num;i++){
			// エレメントを作成する
			var element = document.createElement("div");

			// スタイルを設定
			element.style.cssText = "width:10px; height:10px; background:#fcc;";

			// // 適当なイベントリスナーを登録
			element.addEventListener("click",function (e){
				console.log("マウスボタンをクリックした");
				console.log("イベントフェーズ:" + e.eventPhase);
				console.log("---");
			});

			// エレメントを配列に格納して参照を保持し続ける
			ary.push(element);
		}
	},1);


	// ------------------------------------------------------------
	// マウスボタンを押したときに実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("click",function (e){

		// 配列をクリアしてエレメントへの参照をすべて絶つ(次のガベージコレクション発生時にメモリが開放される)
		ary.length = 0;

	});

}
 

 
 

イベントを発行する

 
 


■イベントを発行する


EventTarget から、イベントを発行するには、dispatchEvent() メソッドを使用します。
 
EventTarget.dispatchEvent ( Event ) :Boolean
第01引数 Eventイベントオブジェクトを指定
戻り値 Booleantrue の場合送出に成功。イベントの伝達を中止した場合も true。
false の場合送出に失敗。リスナーがキャンセルを要求した場合も false。
 
イベントの実装については、こちらで解説しています。
 
EventTarget の実装については、こちらで解説しています。
 
■既存イベントの発行について
 
既存イベントを発行して、ブラウザを制御する事はできません。
 
例えば、onresize イベントを発行して、実際にブラウザをリサイズできるわけではありません。
 
例えば、onmousemove イベントを発行して、OS のマウスカーソルを移動できるわけではありません。
 
イベントを発行すると、任意の EventTarget に登録したコールバック関数が実行されるだけです。
 
■使用例
 
onresize イベントを手動的に発行する

// イベントリスナーに対応している
if(window.addEventListener){

	// ------------------------------------------------------------
	// リサイズ時に実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("resize",function (e) {
		console.log("イベントの通知を受け取った");
	});


	// ------------------------------------------------------------
	// イベントオブジェクト
	// ------------------------------------------------------------
	// 基本イベントオブジェクトを作成
	var event_obj = document.createEvent("Event");

	// 基本イベントオブジェクトを初期化
	event_obj.initEvent("resize",false,false);


	// ------------------------------------------------------------
	// window の EventTarget から送出
	// ------------------------------------------------------------
	window.dispatchEvent(event_obj);

}
 
onclick イベントを手動的に発行する

// イベントリスナーに対応している
if(document.addEventListener){

	// ------------------------------------------------------------
	// マウスボタンをクリックしたときに実行されるイベント
	// ------------------------------------------------------------
	document.addEventListener("click",function (e) {
		console.log("イベントの通知を受け取った");
	});


	// ------------------------------------------------------------
	// イベントオブジェクト
	// ------------------------------------------------------------
	// マウスイベントオブジェクトを作成
	var mouse_event = document.createEvent("MouseEvent");

	// マウスイベントオブジェクトを初期化
	mouse_event.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);


	// ------------------------------------------------------------
	// document の EventTarget から送出
	// ------------------------------------------------------------
	document.dispatchEvent(mouse_event);
}
 

■イベントを実装する

 
■イベントオブジェクトを作成する
 
イベントオブジェクトを作成するには、document.createEvent() メソッドを使用します。
 
引数に、イベントタイプ名を指定します。
 
document.createEvent ( "イベントタイプ名" ) :Event
第01引数 Stringイベントタイプ名を指定
戻り値 Event新しい Event オブジェクト
 
■ DOM Level 2 Events のイベントタイプ名
 
イベントタイプ名初期化に使用するメソッド
"Event"EventinitEvent()
"UIEvent"UIEventinitUIEvent()
"MouseEvent"MouseEventinitMouseEvent()
"MutationEvent"MutationEventinitMutationEvent()
 
■ DOM Level 3 Events のイベントタイプ名(一部抜粋)
 
イベントタイプ名初期化に使用するメソッド
"CustomEvent"CustomEventinitCustomEvent()
"FocusEvent"FocusEventinitFocusEvent()
 
■ HTML5 世代のイベントタイプ名(一部抜粋)
 
イベントタイプ名初期化に使用するメソッド
"ProgressEvent"ProgressEventinitProgressEvent()
"TouchEvent"TouchEventinitTouchEvent()
 

■EventTarget を実装する


イベント駆動の仕組みを、自ら供給するには、EventTarget インターフェースを使用します。
 
■EventTarget インターフェースを実装する
 
EventTarget インターフェースを実装します。
 
ダミーの DOM オブジェクトを作成して、ラッピングします。
 
EventTarget インターフェースを実装した、MyClass クラスの作成例です。
 
EventTarget インターフェースを実装したコンストラクタ関数

// ------------------------------------------------------------
// EventTarget インターフェースを実装した、コンストラクタ関数
// ------------------------------------------------------------
function MyClass(){

	// ------------------------------------------------------------
	// プライベートな変数
	// ------------------------------------------------------------
	var _event_target = null;

	// ------------------------------------------------------------
	// EventTarget インターフェース
	// ------------------------------------------------------------
	this.addEventListener = function (type, listener, useCapture) {
		_event_target.addEventListener(type,listener,useCapture);
	};
	this.removeEventListener = function (type, listener, useCapture) {
		_event_target.removeEventListener(type,listener,useCapture);
	};
	this.dispatchEvent = function (event) {
		return _event_target.dispatchEvent(event);
	};

	// ------------------------------------------------------------
	// 初期化
	// ------------------------------------------------------------
	(function (){
		// DOM オブジェクトを作成
		_event_target = document.createTextNode("");
	})();
}
 
MyClass オブジェクトを作成し、イベントを送出する

// ------------------------------------------------------------
// MyClass オブジェクト
// ------------------------------------------------------------
// MyClass オブジェクトを作成する
var event_target = new MyClass();

// カスタムイベントをリッスンする
event_target.addEventListener("myCustomEvent",function (e) {
	console.log("イベントの通知を受け取った");
});


// ------------------------------------------------------------
// イベントオブジェクト
// ------------------------------------------------------------
// イベントオブジェクトを作成
var event_obj = new Event("myCustomEvent");


// ------------------------------------------------------------
// EventTarget から送出
// ------------------------------------------------------------
event_target.dispatchEvent(event_obj);
 

 
 

コールバック関数にデータを渡す

 
 


■コールバック関数にデータを渡す


■クロージャとは?
 
クロージャについては、こちらで解説しています。
 
■クロージャを使ってデータを渡す
 
クロージャを使うと、イベントリスナーごとに隠匿性のある環境を構築することができます。
 
外部から渡したいデータや作業用の領域は、すべてローカル変数として用意すればいいので、外側の環境が汚染しません。
 
無名関数を使って、イベントごとに小規模な環境を動的に構築する

// エレメント用のパラメータ
var element_param = [
	{ name : "ElementA" },
	{ name : "ElementB" },
	{ name : "ElementC" },
	{ name : "ElementD" },
	{ name : "ElementE" }
];

// イベントリスナーに対応している
if(document.addEventListener){

	var i;
	var num = element_param.length;

	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// エレメント
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document.createElement("div");

		// スタイルを設定
		element.style.cssText = "width:200px; height:200px; border:5px #a00 solid; background:#F44; position:absolute;";

		// BODY のノードリストに登録する
		document.body.appendChild(element);

		// ランダムに配置
		element.style.left = (Math.random() * 500) + "px";
		element.style.top  = (Math.random() * 500) + "px";


		// ------------------------------------------------------------
		// 無名関数内で実行(リスナーごとにアクセスできる小規模な環境を構築)
		// ------------------------------------------------------------
		(function (){

			// ローカル変数(外部から渡したいデータがあればローカル変数に格納しておく)
			var param = element_param[i];
			var name = param.name;
			var count = 0;

			// マウスボタンをクリックしたときに実行されるイベント
			element.addEventListener("click",function (e) {

				// 出力テスト
				console.log("name:" + name + " count:" + count);

				// カウンタを更新
				count ++;

			});
		})();
	}
}
 

■プロパティを追加してデータを渡す


■プロパティを追加してデータを渡す
 
EventTarget はオブジェクトの一種です。
 
好きなプロパティを追加して、データを渡します。
 
オブジェクトが汚染するため、別の方法を使用した方がいいでしょう。
 
下の例では、プロパティ myWork を追加しています。
 
エレメントにプロパティを追加してデータをセットし、リスナーから取り出す

// エレメント用のパラメータ
var element_param = [
	{ name : "ElementA" },
	{ name : "ElementB" },
	{ name : "ElementC" },
	{ name : "ElementD" },
	{ name : "ElementE" }
];


// イベントリスナーに対応している
if(window.addEventListener){

	var i;
	var num = element_param.length;

	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// エレメント
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document.createElement("div");

		// スタイルを設定
		element.style.cssText = "width:200px; height:200px; border:5px #a00 solid; background:#F44; position:absolute;";

		// BODY のノードリストに登録する
		document.body.appendChild(element);

		// ランダムに配置
		element.style.left = (Math.random() * 500) + "px";
		element.style.top  = (Math.random() * 500) + "px";


		// ------------------------------------------------------------
		// 外部から渡したいデータをプロパティを追加してセット
		// ------------------------------------------------------------
		if(!element.myWork){
			element.myWork = element_param[i];
		}

		// ------------------------------------------------------------
		// マウスボタンをクリックしたときに実行されるイベント
		// ------------------------------------------------------------
		element.addEventListener("click",function (e) {

			// 自身のコールバック関数(イベントリスナー)登録時に指定した EventTarget を取得
			var element = e.currentTarget;

			// 外部から渡されたデータを取得
			var param = element.myWork;

			// 出力テスト
			console.log("name:" + param.name);
		});
	}
}
 

■EventListener を実装してデータを渡す


■EventListener を実装してデータを渡す
 
EventListener インターフェースを実装した、MyEventListener クラスの作成例です。
 
handleEvent プロパティに、コールバック関数を用意します。
 
EventListener インターフェースを実装したコンストラクタ関数

// ------------------------------------------------------------
// EventListener インターフェースを実装した、コンストラクタ関数
// ------------------------------------------------------------
function MyEventListener(){

	// ------------------------------------------------------------
	// プライベートな変数
	// ------------------------------------------------------------
	var _count = 0;
	var _name = "";

	// ------------------------------------------------------------
	// 外部に公開する関数
	// ------------------------------------------------------------
	this.setName = function (name){
		_name = name;
	};

	// ------------------------------------------------------------
	// コールバック関数
	// ------------------------------------------------------------
	this.handleEvent = function (e){

		// 出力テスト
		console.log("name:" + _name + " count:" + _count);

		// カウンタを更新
		_count ++;
	};

}
 
■使用例
 
EventListener オブジェクトを使ってデータを渡す

// ------------------------------------------------------------
// エレメント用のパラメータ
// ------------------------------------------------------------
var element_param = [
	{ name : "ElementA" },
	{ name : "ElementB" },
	{ name : "ElementC" },
	{ name : "ElementD" },
	{ name : "ElementE" }
];


// イベントリスナーに対応している
if(window.addEventListener){

	var i;
	var num = element_param.length;

	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// エレメント
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document.createElement("div");

		// スタイルを設定
		element.style.cssText = "width:200px; height:200px; border:5px #a00 solid; background:#F44; position:absolute;";

		// BODY のノードリストに登録する
		document.body.appendChild(element);

		// ランダムに配置
		element.style.left = (Math.random() * 500) + "px";
		element.style.top  = (Math.random() * 500) + "px";


		// ------------------------------------------------------------
		// MyEventListener
		// ------------------------------------------------------------
		// MyEventListener オブジェクトを作成
		var event_listener = new MyEventListener();

		// リスナーにデータをセットする
		event_listener.setName(element_param[i].name);

		// リッスンを開始する
		element.addEventListener("click",event_listener);

	}
}
 

■Function.bind() メソッドを使ってデータを渡す


■束縛効果のある関数を作成してデータを渡す
 
束縛効果のある関数を生成するには、Function.bind() メソッドを使用します。
 
Function.bind() メソッドについては、こちらで解説しています。
 
コールバック関数内の this に相当するオブジェクトを、別のオブジェクトに変更する事ができます。
 
Function.bind() メソッドを使って任意のデータを渡す

// エレメント用のパラメータ
var element_param = [
	{ name : "ElementA" },
	{ name : "ElementB" },
	{ name : "ElementC" },
	{ name : "ElementD" },
	{ name : "ElementE" }
];


// bind メソッドに対応している
if(Function.bind){

	var i;
	var num = element_param.length;

	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// エレメント
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document.createElement("div");

		// スタイルを設定
		element.style.cssText = "width:200px; height:200px; border:5px #a00 solid; background:#F44; position:absolute;";

		// BODY のノードリストに登録する
		document.body.appendChild(element);

		// ランダムに配置
		element.style.left = (Math.random() * 500) + "px";
		element.style.top  = (Math.random() * 500) + "px";


		// ------------------------------------------------------------
		// 外部から渡したいデータ
		// ------------------------------------------------------------
		var work = {
			param:element_param[i]
		};

		// ------------------------------------------------------------
		// マウスボタンをクリックしたときに実行されるイベント
		// ------------------------------------------------------------
		element.addEventListener("click",function (e) {

			// bind メソッドの第01引数で指定したオブジェクトを取得
			var work = this;
			var param = work.param;

			// 自身のコールバック関数(イベントリスナー)登録時に指定した EventTarget を取得
			var element = e.currentTarget;

			// 出力テスト
			console.log("name:" + param.name);
		}.bind(work));
	}
}
 

■WeakMap クラスを使ってデータを渡す


■WeakMap クラスを使ってデータを渡す
 
Map クラスは、オブジェクトをキーとして利用できる、連想配列の一種です。
 
Map クラスについては、こちらで解説しています。
 
WeakMap コンストラクタを使って、弱参照で作成します。
 
キーとして使用した EventTarget オブジェクトが消滅すると、プロパティも自動的に消滅します。
 
WeakMap オブジェクトにデータをセットし、リスナーから取り出す

// エレメント用のパラメータ
var element_param = [
	{ name : "ElementA" },
	{ name : "ElementB" },
	{ name : "ElementC" },
	{ name : "ElementD" },
	{ name : "ElementE" }
];


// WeakMap クラスに対応している
if(window.WeakMap){

	// 辞書を作成
	var dictionary = new WeakMap();

	var i;
	var num = element_param.length;

	for(i=0;i < num;i++){

		// ------------------------------------------------------------
		// エレメント
		// ------------------------------------------------------------
		// エレメントを作成する
		var element = document.createElement("div");

		// スタイルを設定
		element.style.cssText = "width:200px; height:200px; border:5px #a00 solid; background:#F44; position:absolute;";

		// BODY のノードリストに登録する
		document.body.appendChild(element);

		// ランダムに配置
		element.style.left = (Math.random() * 500) + "px";
		element.style.top  = (Math.random() * 500) + "px";


		// ------------------------------------------------------------
		// 外部から渡したいデータを辞書にセット
		// ------------------------------------------------------------
		if(!dictionary.has(element)){
			dictionary.set(element,{
				name:element_param[i].name,
				count:0
			});
		}


		// ------------------------------------------------------------
		// マウスボタンをクリックしたときに実行されるイベント
		// ------------------------------------------------------------
		element.addEventListener("click",function (e) {

			// エレメントを取得
			var element = e.currentTarget;

			// 辞書からデータを取得
			var param = dictionary.get(element);

			// 出力テスト
			console.log("name:" + param.name + " count:" + param.count);

			param.count += 1;
		});

	}
}
 

 
 

ユーザーインターフェースイベントについて(UIEvent)

 
 


■ UIEvent インターフェースについて

 
UIEvent には、ユーザーインターフェースに関するイベント情報が格納されます。
 
■ UIEvent インターフェースの派生について
 
UIEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
UIEvent
 

■ UIEvent インターフェースのプロパティについて

 
UIEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
viewAbstractViewイベントと関係する AbstractView オブジェクトを取得する。
Window などが該当する。
detailNumberイベントと関係する数値データを取得する。
 

■ UIEvent オブジェクトを生成する (Level3)

 
new 演算子を使って、UIEvent コンストラクタをインスタンス化します。
 
UIEvent コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
UIEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
 
new UIEvent ( "イベント名" , UIEventInit ) :UIEvent
第01引数 Stringイベント名を指定
第02引数(略可)UIEventInitUIEventInit オブジェクトを指定。
戻り値 UIEventUIEvent オブジェクトが得られる
 
UIEvent オブジェクトを作成

// UIEvent オブジェクトを作成
var ui_event = new UIEvent("myCustomEvent");
 
■ UIEventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
viewAbstractViewUIEvent.view の設定
detailNumberUIEvent.detail の設定
 
UIEventInit オブジェクトを作成

// ------------------------------------------------------------
// UIEventInit オブジェクトを作成
// ------------------------------------------------------------
var ui_event_init = {

	// バブリングイベントに対応するか
	bubbles:true,

	// キャンセルに対応するか
	cancelable:true,

	// イベントと関係する AbstractView オブジェクト
	view:document.defaultView,

	// イベントと関係する数値データ
	detail:0

};

// ------------------------------------------------------------
// UIEvent オブジェクトを作成
// ------------------------------------------------------------
var ui_event = new UIEvent("myCustomEvent",ui_event_init);
 

■ UIEvent オブジェクトを初期化する (Level2)

 
UIEvent オブジェクトを初期化するには、initUIEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、古いブラウザでも利用可能ですが、将来的には廃止予定です。
 
UIEvent コンストラクタを優先的に使用します。
 
UIEvent.initUIEvent ( type , bubbles , cancelable , AbstractView , detail ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
第04引数 AbstractViewUIEvent.view の設定
第05引数 NumberUIEvent.detail の設定
戻り値 Voidなし
 
UIEvent オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// UIEvent オブジェクトを作成
// ------------------------------------------------------------
var ui_event = document.createEvent("UIEvent");

// ------------------------------------------------------------
// UIEvent に初期値を設定する
// ------------------------------------------------------------
ui_event.initUIEvent(
	"myCustomEvent",
	false,
	false,
	document.defaultView,
	0
);
 

 
 

マウスイベントについて(MouseEvent)

 
 


■ MouseEvent インターフェースについて

 
MouseEvent には、マウスに関するイベント情報が格納されます。
 
■ MouseEvent インターフェースの派生について
 
MouseEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
UIEvent
↓派生
MouseEvent
 

■ MouseEvent インターフェースのプロパティについて

 
MouseEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
■ DOM Events Level2
 
プロパティ名説明
detailNumberマウスボタンのクリック回数を取得する。
screenXNumberモニタのスクリーン領域を原点とした x 座標を取得する。
screenYNumberモニタのスクリーン領域を原点とした y 座標を取得する。
clientXNumberブラウザのクライアント領域を原点とした x 座標を取得する。
clientYNumberブラウザのクライアント領域を原点とした y 座標を取得する。
ctrlKeyBooleanCtrl キーの押下状態を取得する。
shiftKeyBooleanShift キーの押下状態を取得する。
altKeyBooleanAlt キーの押下状態を取得する。
metaKeyBooleanMeta キーの押下状態を取得する。
buttonNumberイベントの対象となるマウスボタンの種類を取得する。
relatedTargetEventTargetイベントと関係する EventTarget オブジェクトを取得する。
 
■ DOM Events Level3
 
プロパティ名説明
buttonsNumberマウスボタンの純粋な押下状態を取得する。
 
■ Pointer Lock
 
プロパティ名説明
momentXNumber水平方向のマウスの移動量を取得する。
motionYNumber垂直方向のマウスの移動量を取得する。
 

■ MouseEvent オブジェクトを生成する (Level3)

 
new 演算子を使って、MouseEvent コンストラクタをインスタンス化します。
 
MouseEvent コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
MouseEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
 
new MouseEvent ( "イベント名" , MouseEventInit ) :MouseEvent
第01引数 Stringイベント名を指定
第02引数(略可)MouseEventInitMouseEventInit オブジェクトを指定。
戻り値 MouseEventMouseEvent オブジェクトが得られる
 
MouseEvent オブジェクトを作成

// MouseEvent オブジェクトを作成
var mouse_event = new MouseEvent("myCustomEvent");
 
■ MouseEventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
viewAbstractViewUIEvent.view の設定
detailNumberUIEvent.detail の設定。マウスボタンのクリック回数
screenXNumberMouseEvent.screenX の設定
screenYNumberMouseEvent.screenY の設定
clientXNumberMouseEvent.clientX の設定
clientYNumberMouseEvent.clientY の設定
ctrlKeyBooleanMouseEvent.ctrlKey の設定
shiftKeyBooleanMouseEvent.shiftKey の設定
altKeyBooleanMouseEvent.altKey の設定
metaKeyBooleanMouseEvent.metaKey の設定
buttonNumberMouseEvent.button の設定
buttonsNumberMouseEvent.buttons の設定
relatedTargetEventTargetMouseEvent.relatedTarget の設定
 
MouseEventInit オブジェクトを作成

// ------------------------------------------------------------
// MouseEventInit オブジェクトを作成
// ------------------------------------------------------------
var mouse_event_init = {

	// バブリングイベントに対応するか
	bubbles:true,
	// キャンセルに対応するか
	cancelable:true,
	// イベントと関係する AbstractView オブジェクト
	view:document.defaultView,
	// マウスボタンのクリック回数
	detail:0,
	// モニタのスクリーン領域を原点とした x 座標
	screenX:0,
	// モニタのスクリーン領域を原点とした y 座標
	screenY:0,
	// ブラウザのクライアント領域を原点とした x 座標
	clientX:0,
	// ブラウザのクライアント領域を原点とした y 座標
	clientY:0,
	// Ctrl キーの押下状態
	ctrlKey:false,
	// Shift キーの押下状態
	shiftKey:false,
	// Alt キーの押下状態
	altKey:false,
	// Meta キーの押下状態
	metaKey:false,
	// イベントの対象となるマウスボタンの種類
	button:0,
	// マウスボタンの純粋な押下状態
	buttons:0,
	// イベントと関係する EventTarget オブジェクト
	relatedTarget:null

};

// ------------------------------------------------------------
// MouseEvent オブジェクトを作成
// ------------------------------------------------------------
var mouse_event = new MouseEvent("myCustomEvent",mouse_event_init);
 

■ MouseEvent オブジェクトを初期化する (Level2)

 
MouseEvent オブジェクトを初期化するには、initMouseEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、古いブラウザでも利用可能ですが、将来的には廃止予定です。
 
MouseEvent コンストラクタを優先的に使用します。
 
MouseEvent.initMouseEvent ( type , bubbles , cancelable , AbstractView , detail , screenX , screenY , clientX , clientY , ctrlKey , shiftKey , altKey , metaKey , button , relatedTarget ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
第04引数 AbstractViewUIEvent.view の設定
第05引数 NumberUIEvent.detail の設定。マウスボタンのクリック回数を指定。
第06引数 NumberMouseEvent.screenX の設定
第07引数 NumberMouseEvent.screenY の設定
第08引数 NumberMouseEvent.clientX の設定
第09引数 NumberMouseEvent.clientY の設定
第10引数 BooleanMouseEvent.ctrlKey の設定
第11引数 BooleanMouseEvent.shiftKey の設定
第12引数 BooleanMouseEvent.altKey の設定
第13引数 BooleanMouseEvent.metaKey の設定
第14引数 NumberMouseEvent.button の設定
第15引数 EventTargetMouseEvent.relatedTarget の設定
戻り値 Voidなし
 
MouseEvent オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// MouseEvent オブジェクトを作成
// ------------------------------------------------------------
var mouse_event = document.createEvent("MouseEvent");

// ------------------------------------------------------------
// MouseEvent に初期値を設定する
// ------------------------------------------------------------
mouse_event.initMouseEvent(
	"myCustomEvent",
	false,
	false,
	document.defaultView,
	0,
	0,
	0,
	0,
	0,
	false,
	false,
	false,
	false,
	0,
	null
);
 

 
 

カスタムイベントについて(CustomEvent)

 
 


■ CustomEvent インターフェースについて

 
CustomEvent には、自由なイベント情報が格納されます。
 
■ CustomEvent インターフェースの派生について
 
CustomEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
CustomEvent
 

■ CustomEvent インターフェースのプロパティについて

 
CustomEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
detailObjectイベントの発行者が格納したデータを取得する。
 

■ CustomEvent オブジェクトを生成する (Level3)

 
new 演算子を使って、CustomEvent コンストラクタをインスタンス化します。
 
CustomEvent コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
CustomEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
 
new CustomEvent ( "イベント名" , CustomEventInit ) :CustomEvent
第01引数 Stringイベント名を指定
第02引数(略可)CustomEventInitCustomEventInit オブジェクトを指定。
戻り値 CustomEventCustomEvent オブジェクトが得られる
 
カスタムイベントオブジェクトを作成

// カスタムイベントオブジェクトを作成
var custom_event = new CustomEvent("myCustomEvent");
 
■ CustomEventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
detailObjectCustomEvent.detail の設定
 
CustomEventInit オブジェクトを作成

// ------------------------------------------------------------
// CustomEventInit オブジェクトを作成
// ------------------------------------------------------------
var custom_event_init = {

	// バブリングイベントに対応するか
	bubbles:true,

	// キャンセルに対応するか
	cancelable:true,

	// 好きなデータを格納
	detail:{aaa:123,bbb:"あいうえお"}

};

// ------------------------------------------------------------
// カスタムイベントオブジェクトを作成
// ------------------------------------------------------------
var custom_event = new CustomEvent("myCustomEvent",custom_event_init);
 

■ CustomEvent オブジェクトを初期化する (Level3)

 
CustomEvent オブジェクトを初期化するには、initCustomEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、廃止予定です。
 
CustomEvent コンストラクタに対応していない、草案時代の環境で利用します。
 
CustomEvent.initCustomEvent ( type , bubbles , cancelable , detail ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
第04引数 ObjectCustomEvent.detail の設定
戻り値 Voidなし
 
CustomEvent オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// CustomEvent オブジェクトを作成
// ------------------------------------------------------------
var custom_event = document.createEvent("CustomEvent");

// ------------------------------------------------------------
// CustomEvent に初期値を設定する
// ------------------------------------------------------------
custom_event.initCustomEvent(
	"myCustomEvent",
	false,
	false,
	{aaa:123,bbb:"あいうえお"}
);
 

 
 

フォーカスイベントについて(FocusEvent)

 
 


■ FocusEvent インターフェースについて

 
FocusEvent には、フォーカスに関するイベント情報が格納されます。
 
■ FocusEvent インターフェースの派生について
 
FocusEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
UIEvent
↓派生
FocusEvent
 

■ FocusEvent インターフェースのプロパティについて

 
FocusEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
relatedTargetEventTargetフォーカスが当たる場合、直前まで当たっていたオブジェクト。
フォーカスが外れる場合、次にフォーカスが当たるオブジェクト。
該当オブジェクトが存在しない場合は null
 

■ FocusEvent オブジェクトを生成する (Level3)

 
new 演算子を使って、FocusEvent コンストラクタをインスタンス化します。
 
FocusEvent コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
FocusEvent オブジェクトの生成と、初期化を同時に行う事ができます。
 
new FocusEvent ( "イベント名" , FocusEventInit ) :FocusEvent
第01引数 Stringイベント名を指定
第02引数(略可)FocusEventInitFocusEventInit オブジェクトを指定。
戻り値 FocusEventFocusEvent オブジェクトが得られる
 
フォーカスイベントオブジェクトを作成

// フォーカスイベントオブジェクトを作成
var focus_event = new FocusEvent("myFocusEvent");
 
■ FocusEventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
viewAbstractViewUIEvent.view の設定
detailNumberUIEvent.detail の設定
relatedTargetEventTargetFocusEvent.relatedTarget の設定
 
FocusEventInit オブジェクトを作成

// ------------------------------------------------------------
// FocusEventInit オブジェクトを作成
// ------------------------------------------------------------
var focus_event_init = {

	// バブリングイベントに対応するか
	bubbles:true,

	// キャンセルに対応するか
	cancelable:true,

	// イベントと関係する AbstractView オブジェクト
	view:document.defaultView,

	// イベントと関係する数値データ
	detail:0,

	// イベントと関係する EventTarget オブジェクト
	relatedTarget:null

};

// ------------------------------------------------------------
// フォーカスイベントオブジェクトを作成
// ------------------------------------------------------------
var focus_event = new FocusEvent("myFocusEvent",focus_event_init);
 

■ FocusEvent オブジェクトを初期化する (Level3)

 
FocusEvent オブジェクトを初期化するには、initFocusEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、廃止予定です。
 
FocusEvent コンストラクタに対応していない、草案時代の環境で利用します。
 
FocusEvent.initFocusEvent ( type , bubbles , cancelable , view , detail , relatedTarget ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
第04引数 AbstractViewUIEvent.view の設定
第05引数 NumberUIEvent.detail の設定
第06引数 EventTargetFocusEvent.relatedTarget の設定
戻り値 Voidなし
 
FocusEvent オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// FocusEvent オブジェクトを作成
// ------------------------------------------------------------
var focus_event = document.createEvent("FocusEvent");

// ------------------------------------------------------------
// FocusEvent に初期値を設定する
// ------------------------------------------------------------
focus_event.initFocusEvent(
	"myFocusEvent",
	false,
	false,
	document.defaultView,
	0,
	null
);
 

 
 

プログレスイベントについて(ProgressEvent)

 
 


■ ProgressEvent インターフェースについて

 
ProgressEvent には、進捗に関するイベント情報が格納されます。
 
■ ProgressEvent インターフェースの派生について
 
ProgressEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
ProgressEvent
 

■ ProgressEvent インターフェースのプロパティについて

 
ProgressEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
lengthComputableBoolean進捗のサイズ計算が可能であるかを取得
loadedNumberこれまでに読み込みが完了した数を取得(単位:個数やバイト数)
totalNumber読み込む全体の数を取得(単位:個数やバイト数)
 

■ ProgressEvent オブジェクトを生成する

 
new 演算子を使って、ProgressEvent コンストラクタをインスタンス化します。
 
ProgressEvent コンストラクタは、一部のブラウザで動作します。
 
対応していない場合、こちらを使用します。
 
ProgressEvent オブジェクトの生成と、初期化を同時に行う事ができます。
 
new ProgressEvent ( "イベント名" , ProgressEventInit ) :ProgressEvent
第01引数 Stringイベント名を指定
第02引数(略可)ProgressEventInitProgressEventInit オブジェクトを指定。
戻り値 ProgressEventEvent オブジェクト
 
プログレスイベントオブジェクトを作成

// プログレスイベントオブジェクトを作成
var progress_event = new ProgressEvent("myProgressEvent");
 
■ ProgressEventInit オブジェクトについて
 
新規にオブジェクトを作成し、以下のプロパティを追加します。
 
プロパティ名説明
bubblesBooleanEvent.bubbles の設定
cancelableBooleanEvent.cancelable の設定
lengthComputableBooleanProgressEvent.lengthComputable の設定
loadedNumberProgressEvent.loaded の設定
totalNumberProgressEvent.total の設定
 
ProgressEventInit オブジェクトを作成

// ------------------------------------------------------------
// ProgressEventInit オブジェクトを作成
// ------------------------------------------------------------
var progress_event_init = {

	// バブリングイベントに対応するか
	bubbles:true,

	// キャンセルに対応するか
	cancelable:true,

	// 進捗のサイズ計算が可能であるか
	lengthComputable:false,

	// これまでに読み込みが完了した数
	loaded:0,

	// 読み込む全体の数
	total:9

};

// ------------------------------------------------------------
// プログレスイベントオブジェクトを作成
// ------------------------------------------------------------
var progress_event = new ProgressEvent("myProgressEvent",progress_event_init);
 

■ ProgressEvent オブジェクトを初期化する

 
ProgressEvent オブジェクトを初期化するには、initProgressEvent() メソッドを使用します。
 
document.createEvent() メソッドと組み合わせて使用します。
 
このメソッドは、廃止予定です。
 
ProgressEvent コンストラクタに対応していない、草案時代の環境で利用します。
 
ProgressEvent.initProgressEvent ( type , bubbles , cancelable , lengthComputable , loaded , total ) :Void
第01引数 StringEvent.type の設定
第02引数 BooleanEvent.bubbles の設定
第03引数 BooleanEvent.cancelable の設定
第04引数 BooleanProgressEvent.lengthComputable の設定
第05引数 NumberProgressEvent.loaded の設定
第06引数 NumberProgressEvent.total の設定
戻り値 Voidなし
 
ProgressEvent オブジェクトを作成し、初期値を設定する

// ------------------------------------------------------------
// ProgressEvent オブジェクトを作成
// ------------------------------------------------------------
var progress_event = document.createEvent("ProgressEvent");

// ------------------------------------------------------------
// ProgressEvent に初期値を設定する
// ------------------------------------------------------------
progress_event.initProgressEvent(
	"myProgressEvent",
	false,
	false,
	true,
	0,
	9
);
 

 
 

タッチイベントについて(TouchEvent)

 
 


■ TouchEvent インターフェースについて

 
TouchEvent には、タッチスクリーンに関するイベント情報が格納されます。
 
■ TouchEvent インターフェースの派生について
 
TouchEvent インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Event
↓派生
UIEvent
↓派生
TouchEvent
 

■ TouchEvent インターフェースのプロパティについて

 
TouchEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
touchesTouchList接地状態であるすべての Touch オブジェクトのリスト。
targetTouchesTouchListタッチを開始した DOM オブジェクトが同じとなる Touch オブジェクトだけを集めたリスト。
changedTouchesTouchList変化した Touch オブジェクトだけを集めたリスト。
ctrlKeyBooleanCtrl キーの押下状態を取得する。
shiftKeyBooleanShift キーの押下状態を取得する。
altKeyBooleanAlt キーの押下状態を取得する。
metaKeyBooleanMeta キーの押下状態を取得する。