イベントについて（DOM Event Model）
イベントについて
■ 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)
http://www.w3.org/TR/dom/#events (DOM4)
Internet Explorer 8 以前では利用できません。
かわりに、アタッチイベントを使用します。
■イベントについて
■ EventTarget インターフェースについて
EventTarget は、イベントを発行する事ができます。
イベントは、主にシステム側から発行されます。
自ら発送者として、イベントを供給することもできます。
■ DOM における実装
DOM オブジェクトは、必ず EventTarget インターフェースが実装されています。
また、任意のクラスに、EventTarget インターフェースが実装されている場合、何らかのイベントが供給されているでしょう。
例えば、XMLHttpRequest などがあります。
■供給されるイベントの種類について
供給されるイベントの種類については、以下のページが参考になります。
http://www.w3.org/TR/html401/index/elements.html (HTML 4.01 Elements)
http://www.w3.org/TR/html5/index.html#element-interfaces (HTML5 Elements)
■ EventListener について
EventListener は、「イベントを聞く人」を意味します。
EventTarget から発行されるイベントの通知を、受け取りたい側に相当します。
EventListener というインターフェースがありますが、必須ではありません。
イベントリスナーという用語は、広い意味を持ちます。
■ EventTarget とリスナーの関係
リスナーについて
あなたは、イベント通知を受け取りたいプログラマです。
あなたは、EventTarget に、コールバック関数を登録する事ができます。
コールバック関数は、ハンドラ（処理部）と呼ばれます。
コールバック関数は、EventTarget のリスナーとなります。
１つの EventTarget に対して、複数のコールバック関数を登録する事もできます。
イベントのディスパッチについて
EventTarget は、登録されたコールバック関数を実行します。
こうしてあなたは、EventTarget からのイベント通知を受け取る事ができます。
コールバック関数の引数から、Event オブジェクトが得られます。
■イベントフェーズについて
大抵のイベントは、DOM ツリーと密接に関係しています。
■バブルズ（Bubbles）について
大抵のイベントは、バブルズ（Bubbles）に対応しています。
対象本人だけでなく、祖先にも通知されます。
バブルズに対応していないイベントは、対象本人にのみ通知されます。
■イベントフェーズについて
イベント通知の伝達順序として、以下の段階があります。
１．キャプチャ段階
２．ターゲット段階
３．バブリング段階
バブルズに対応しているイベントは、キャプチャ段階 → ターゲット段階 → バブリング段階 という順序で伝達されます。
バブルズに対応していないイベントは、ターゲット段階のみ実行されます。
１．キャプチャ段階
キャプチャ段階では、ウィンドウから子孫に向かって順番に実行されます。
「ウィンドウ」から「ターゲットの直前」まで実行されます。
任意のリスナーにとって、子孫にイベントが発生した事がわかります。
下の図であれば、１～５に登録したリスナーに相当します。
２．ターゲット段階
ターゲット段階は、対象となるオブジェクトに到達したときに実行されます。
「ターゲット」が実行されます。
任意のリスナーにとって、自身にイベントが発生した事がわかります。
３．バブリング段階
バブリング段階では、子孫からウィンドウに向かって順番に実行されます。
「ターゲットの直後」から「ウィンドウ」まで実行されます。
上に戻っていく流れが、バブル（泡）となります。
任意のリスナーにとって、子孫にイベントが発生した事がわかります。
下の図であれば、１～５に登録したリスナーに相当します。
■イベントフェーズの流れを確認する
マウスボタンを押した時のイベントフェーズの流れを確認する
<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 オブジェクトです。
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)
http://www.w3.org/TR/dom/#events (DOM4 Events)
■ Event インターフェースのプロパティについて
Event インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| type | String | イベント名を取得する。 |
| currentTarget | Object | イベント伝達中における現在の場所を意味する。 イベントリスナー（現在呼び出されているコールバック関数自身）の登録時に指定した EventTarget オブジェクトを指す。 |
| target | Object | イベントの発生場所を意味する。ターゲット段階で動作する EventTarget オブジェクトを指す。 |
| eventPhase | Number | イベントフェーズの種類。 |
| bubbles | Boolean | true の場合、バブルズに対応している。 |
| cancelable | Boolean | true の場合、デフォルトの動作のキャンセルに対応している。 |
| timeStamp | Number | タイムスタンプ |
■ eventPhase プロパティ
eventPhase プロパティからは、以下の定数が取得できます。
イベントフェーズについては、こちらで解説しています。
| 定数 | 番号 | 説明 |
| Event. | 1 | キャプチャ段階 |
| Event. | 2 | ターゲット段階 |
| Event. | 3 | バブリング段階 |
■ 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){
// ------------------------------------------------------------
// マウスボタンをクリックしたときに実行される関数
// ------------------------------------------------------------
// リスナーＡ
function MouseClickFuncA(e){
var current = e.currentTarget;
console.log("リスナーＡ");
console.log("カレント:" + current + "(" + current.nodeName + ")");
console.log("イベントフェーズ:" + e.eventPhase);
console.log("---");
// ターゲットフェーズに到達した
if (e.eventPhase == Event.AT_TARGET) {
// イベント通知の伝達を終了する
e.stopPropagation();
}
}
// リスナーＢ
function MouseClickFuncB(e){
var current = e.currentTarget;
console.log("リスナーＢ");
console.log("カレント:" + current + "(" + current.nodeName + ")");
console.log("イベントフェーズ:" + e.eventPhase);
console.log("---");
}
// ------------------------------------------------------------
// すべてのフェーズでリッスンを開始
// ------------------------------------------------------------
// ウィンドウにリスナーＡを登録
window.addEventListener("click",MouseClickFuncA,true );
window.addEventListener("click",MouseClickFuncA,false );
// ウィンドウにリスナーＢを登録
window.addEventListener("click",MouseClickFuncB,true );
window.addEventListener("click",MouseClickFuncB,false );
// ドキュメントにリスナーＡを登録
document.addEventListener("click",MouseClickFuncA,true );
document.addEventListener("click",MouseClickFuncA,false );
// ドキュメントにリスナーＢを登録
document.addEventListener("click",MouseClickFuncB,true );
document.addEventListener("click",MouseClickFuncB,false );
// コールバック関数を使って、ドキュメントのすべての子孫を検索
DomNodeFindAllDescendants(document,function (node){
// ドキュメントの子孫にリスナーＡを登録
node.addEventListener("click",MouseClickFuncA,true );
node.addEventListener("click",MouseClickFuncA,false );
// ドキュメントの子孫にリスナーＢを登録
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引数(略可) | EventInit | EventInit オブジェクトを指定。 |
| 戻り値 | Event | Event オブジェクト |
イベントオブジェクトを作成
// イベントオブジェクトを作成
var event_obj = new Event("myCustomEvent");
■ EventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.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.initEvent ( type , bubbles , cancelable ) :Void
| 第01引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.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){
// ------------------------------------------------------------
// エレメントＡ
// ------------------------------------------------------------
// エレメントを作成する
var element_a = document.createElement("div");
element_a.name = "ElementA";
// BODY のノードリストにエレメントＡを登録する
document.body.appendChild(element_a);
// ------------------------------------------------------------
// エレメントＢ
// ------------------------------------------------------------
// エレメントを作成する
var element_b = document.createElement("div");
element_b.name = "ElementB";
// エレメントＡのノードリストにエレメントＢを登録する
element_a.appendChild(element_b);
// ------------------------------------------------------------
// エレメントＣ
// ------------------------------------------------------------
// エレメントを作成する
var element_c = document.createElement("div");
element_c.name = "ElementC";
// エレメントＢのノードリストにエレメントＣを登録する
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);
// ------------------------------------------------------------
// エレメントＣの 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引数(略可) | Boolean | true の場合、キャプチャー段階やターゲット段階でイベントの通知を受け取る。 false の場合、ターゲット段階やバブリング段階でイベントの通知を受け取る。（デフォルトは false） |
| 戻り値 | Void | なし |
■第01引数 イベント名
監視したいイベントの名称を指定します。
イベントハンドラ名を使用する場合、"on" という文字を除去します。
例えば、onmousedown イベントを使用する場合は、"mousedown" を指定します。
■第02引数 コールバック関数
EventTarget がイベントを発行したときに、実行して欲しいコールバック関数を指定します。
マウスボタンをクリックしたときに実行されるイベント
// マウスボタンをクリックしたときに実行される関数
function MouseClickFunc(e){
// 出力テスト
console.log(e);
}
// イベントリスナーに対応している
if(document.addEventListener){
// イベントのリッスンを開始する
document.addEventListener("click",MouseClickFunc);
}
■第02引数 EventListener オブジェクト
マウスボタンをクリックしたときに実行されるイベント
// 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引数の指定がすべて同一である場合、リスナーの登録を試みても２重に登録されることはありません。
第01～03引数の指定に１つでも相違がある場合、リスナーの登録を試みるたびに多重に登録されていきます。
第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 | イベントオブジェクトを指定 |
| 戻り値 | Boolean | true の場合送出に成功。イベントの伝達を中止した場合も true。 false の場合送出に失敗。リスナーがキャンセルを要求した場合も false。 |
■既存イベントの発行について
既存イベントを発行して、ブラウザを制御する事はできません。
例えば、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" | Event | initEvent() |
| "UIEvent" | UIEvent | initUIEvent() |
| "MouseEvent" | MouseEvent | initMouseEvent() |
| "MutationEvent" | MutationEvent | initMutationEvent() |
■ DOM Level 3 Events のイベントタイプ名（一部抜粋）
| イベントタイプ名 | 型 | 初期化に使用するメソッド |
| "CustomEvent" | CustomEvent | initCustomEvent() |
| "FocusEvent" | FocusEvent | initFocusEvent() |
■ HTML5 世代のイベントタイプ名（一部抜粋）
| イベントタイプ名 | 型 | 初期化に使用するメソッド |
| "ProgressEvent" | ProgressEvent | initProgressEvent() |
| "TouchEvent" | TouchEvent | initTouchEvent() |
■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() メソッドを使ってデータを渡す
■束縛効果のある関数を作成してデータを渡す
コールバック関数内の 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 クラスを使ってデータを渡す
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 インターフェースは、以下の様に派生しています。
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
■ UIEvent インターフェースのプロパティについて
UIEvent インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| view | AbstractView | イベントと関係する AbstractView オブジェクトを取得する。 Window などが該当する。 |
| detail | Number | イベントと関係する数値データを取得する。 |
■ UIEvent オブジェクトを生成する (Level3)
new 演算子を使って、UIEvent コンストラクタをインスタンス化します。
UIEvent コンストラクタは、一部のブラウザで動作します。
対応していない場合、こちらを使用します。
UIEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
new UIEvent ( "イベント名" , UIEventInit ) :UIEvent
| 第01引数 | String | イベント名を指定 |
| 第02引数(略可) | UIEventInit | UIEventInit オブジェクトを指定。 |
| 戻り値 | UIEvent | UIEvent オブジェクトが得られる |
UIEvent オブジェクトを作成
// UIEvent オブジェクトを作成
var ui_event = new UIEvent("myCustomEvent");
■ UIEventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.cancelable の設定 |
| view | AbstractView | UIEvent.view の設定 |
| detail | Number | UIEvent.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.initUIEvent ( type , bubbles , cancelable , AbstractView , detail ) :Void
| 第01引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.cancelable の設定 |
| 第04引数 | AbstractView | UIEvent.view の設定 |
| 第05引数 | Number | UIEvent.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
| プロパティ名 | 型 | 説明 |
| detail | Number | マウスボタンのクリック回数を取得する。 |
| screenX | Number | モニタのスクリーン領域を原点とした x 座標を取得する。 |
| screenY | Number | モニタのスクリーン領域を原点とした y 座標を取得する。 |
| clientX | Number | ブラウザのクライアント領域を原点とした x 座標を取得する。 |
| clientY | Number | ブラウザのクライアント領域を原点とした y 座標を取得する。 |
| ctrlKey | Boolean | Ctrl キーの押下状態を取得する。 |
| shiftKey | Boolean | Shift キーの押下状態を取得する。 |
| altKey | Boolean | Alt キーの押下状態を取得する。 |
| metaKey | Boolean | Meta キーの押下状態を取得する。 |
| button | Number | イベントの対象となるマウスボタンの種類を取得する。 |
| relatedTarget | EventTarget | イベントと関係する EventTarget オブジェクトを取得する。 |
■ DOM Events Level3
| プロパティ名 | 型 | 説明 |
| buttons | Number | マウスボタンの純粋な押下状態を取得する。 |
■ Pointer Lock
■ MouseEvent オブジェクトを生成する (Level3)
new 演算子を使って、MouseEvent コンストラクタをインスタンス化します。
MouseEvent コンストラクタは、一部のブラウザで動作します。
対応していない場合、こちらを使用します。
MouseEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
new MouseEvent ( "イベント名" , MouseEventInit ) :MouseEvent
| 第01引数 | String | イベント名を指定 |
| 第02引数(略可) | MouseEventInit | MouseEventInit オブジェクトを指定。 |
| 戻り値 | MouseEvent | MouseEvent オブジェクトが得られる |
MouseEvent オブジェクトを作成
// MouseEvent オブジェクトを作成
var mouse_event = new MouseEvent("myCustomEvent");
■ MouseEventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.cancelable の設定 |
| view | AbstractView | UIEvent.view の設定 |
| detail | Number | UIEvent.detail の設定。マウスボタンのクリック回数 |
| screenX | Number | MouseEvent.screenX の設定 |
| screenY | Number | MouseEvent.screenY の設定 |
| clientX | Number | MouseEvent.clientX の設定 |
| clientY | Number | MouseEvent.clientY の設定 |
| ctrlKey | Boolean | MouseEvent.ctrlKey の設定 |
| shiftKey | Boolean | MouseEvent.shiftKey の設定 |
| altKey | Boolean | MouseEvent.altKey の設定 |
| metaKey | Boolean | MouseEvent.metaKey の設定 |
| button | Number | MouseEvent.button の設定 |
| buttons | Number | MouseEvent.buttons の設定 |
| relatedTarget | EventTarget | MouseEvent.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.initMouseEvent ( type , bubbles , cancelable , AbstractView , detail , screenX , screenY , clientX , clientY , ctrlKey , shiftKey , altKey , metaKey , button , relatedTarget ) :Void
| 第01引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.cancelable の設定 |
| 第04引数 | AbstractView | UIEvent.view の設定 |
| 第05引数 | Number | UIEvent.detail の設定。マウスボタンのクリック回数を指定。 |
| 第06引数 | Number | MouseEvent.screenX の設定 |
| 第07引数 | Number | MouseEvent.screenY の設定 |
| 第08引数 | Number | MouseEvent.clientX の設定 |
| 第09引数 | Number | MouseEvent.clientY の設定 |
| 第10引数 | Boolean | MouseEvent.ctrlKey の設定 |
| 第11引数 | Boolean | MouseEvent.shiftKey の設定 |
| 第12引数 | Boolean | MouseEvent.altKey の設定 |
| 第13引数 | Boolean | MouseEvent.metaKey の設定 |
| 第14引数 | Number | MouseEvent.button の設定 |
| 第15引数 | EventTarget | MouseEvent.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 インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| detail | Object | イベントの発行者が格納したデータを取得する。 |
■ CustomEvent オブジェクトを生成する (Level3)
new 演算子を使って、CustomEvent コンストラクタをインスタンス化します。
CustomEvent コンストラクタは、一部のブラウザで動作します。
対応していない場合、こちらを使用します。
CustomEvent オブジェクトの生成と、初期値の設定を同時に行う事ができます。
new CustomEvent ( "イベント名" , CustomEventInit ) :CustomEvent
| 第01引数 | String | イベント名を指定 |
| 第02引数(略可) | CustomEventInit | CustomEventInit オブジェクトを指定。 |
| 戻り値 | CustomEvent | CustomEvent オブジェクトが得られる |
カスタムイベントオブジェクトを作成
// カスタムイベントオブジェクトを作成
var custom_event = new CustomEvent("myCustomEvent");
■ CustomEventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.cancelable の設定 |
| detail | Object | CustomEvent.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引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.cancelable の設定 |
| 第04引数 | Object | CustomEvent.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 インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| relatedTarget | EventTarget | フォーカスが当たる場合、直前まで当たっていたオブジェクト。 フォーカスが外れる場合、次にフォーカスが当たるオブジェクト。 該当オブジェクトが存在しない場合は null |
■ FocusEvent オブジェクトを生成する (Level3)
new 演算子を使って、FocusEvent コンストラクタをインスタンス化します。
FocusEvent コンストラクタは、一部のブラウザで動作します。
対応していない場合、こちらを使用します。
FocusEvent オブジェクトの生成と、初期化を同時に行う事ができます。
new FocusEvent ( "イベント名" , FocusEventInit ) :FocusEvent
| 第01引数 | String | イベント名を指定 |
| 第02引数(略可) | FocusEventInit | FocusEventInit オブジェクトを指定。 |
| 戻り値 | FocusEvent | FocusEvent オブジェクトが得られる |
フォーカスイベントオブジェクトを作成
// フォーカスイベントオブジェクトを作成
var focus_event = new FocusEvent("myFocusEvent");
■ FocusEventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.cancelable の設定 |
| view | AbstractView | UIEvent.view の設定 |
| detail | Number | UIEvent.detail の設定 |
| relatedTarget | EventTarget | FocusEvent.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引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.cancelable の設定 |
| 第04引数 | AbstractView | UIEvent.view の設定 |
| 第05引数 | Number | UIEvent.detail の設定 |
| 第06引数 | EventTarget | FocusEvent.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 インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| lengthComputable | Boolean | 進捗のサイズ計算が可能であるかを取得 |
| loaded | Number | これまでに読み込みが完了した数を取得（単位:個数やバイト数） |
| total | Number | 読み込む全体の数を取得（単位:個数やバイト数） |
■ ProgressEvent オブジェクトを生成する
new 演算子を使って、ProgressEvent コンストラクタをインスタンス化します。
ProgressEvent コンストラクタは、一部のブラウザで動作します。
対応していない場合、こちらを使用します。
ProgressEvent オブジェクトの生成と、初期化を同時に行う事ができます。
new ProgressEvent ( "イベント名" , ProgressEventInit ) :ProgressEvent
| 第01引数 | String | イベント名を指定 |
| 第02引数(略可) | ProgressEventInit | ProgressEventInit オブジェクトを指定。 |
| 戻り値 | ProgressEvent | Event オブジェクト |
プログレスイベントオブジェクトを作成
// プログレスイベントオブジェクトを作成
var progress_event = new ProgressEvent("myProgressEvent");
■ ProgressEventInit オブジェクトについて
新規にオブジェクトを作成し、以下のプロパティを追加します。
| プロパティ名 | 型 | 説明 |
| bubbles | Boolean | Event.bubbles の設定 |
| cancelable | Boolean | Event.cancelable の設定 |
| lengthComputable | Boolean | ProgressEvent.lengthComputable の設定 |
| loaded | Number | ProgressEvent.loaded の設定 |
| total | Number | ProgressEvent.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引数 | String | Event.type の設定 |
| 第02引数 | Boolean | Event.bubbles の設定 |
| 第03引数 | Boolean | Event.cancelable の設定 |
| 第04引数 | Boolean | ProgressEvent.lengthComputable の設定 |
| 第05引数 | Number | ProgressEvent.loaded の設定 |
| 第06引数 | Number | ProgressEvent.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 インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| touches | TouchList | 接地状態であるすべての Touch オブジェクトのリスト。 |
| targetTouches | TouchList | タッチを開始した DOM オブジェクトが同じとなる Touch オブジェクトだけを集めたリスト。 |
| changedTouches | TouchList | 変化した Touch オブジェクトだけを集めたリスト。 |
| ctrlKey | Boolean | Ctrl キーの押下状態を取得する。 |
| shiftKey | Boolean | Shift キーの押下状態を取得する。 |
| altKey | Boolean | Alt キーの押下状態を取得する。 |
| metaKey | Boolean | Meta キーの押下状態を取得する。 |