JavaScriptシニアプログラム設計学習ノート--イベント(二)(イベント対象-DOM中のイベントオブジェクト/IE中のイベントオブジェクト/ブラウザをまたぐイベントオブジェクト)

イベントオブジェクト    DOM上のあるイベントをトリガーすると、イベントに関するすべての情報がこのオブジェクトに含まれているイベントオブジェクトイベントが発生します.イベントを引き起こす要素、イベントの種類、およびその他の特定のイベントに関する情報を含む.例えば、マウス操作によるイベントオブジェクトには、マウスの位置の情報が含まれていますが、キーボード操作によるイベントオブジェクトには、押したキーに関する情報が含まれています.すべてのブラウザオブジェクトはイベントオブジェクトをサポートしていますが、サポート方法は異なります.DOM中のイベントオブジェクト
DOM対応のブラウザは、イベントオブジェクトをイベントハンドラに入力します.イベントハンドラを指定する際にどのような方法(DOM 0またはDOM 2レベル)を使っても、イベントオブジェクトに着信します.次の例を見てください.

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

    alert(event.type);     //"click"

};

btn.addEventListener("click",function(event){

    alert(event.type);     //"click"

},false);    

 
この2つの例のいずれかのイベントハンドラは、event.type属性によって表されるイベントタイプを示す警告ボックスをポップアップします.この属性は常にトリガーされたイベントタイプを含んでいます.HTML特性でイベントハンドラを指定すると、変数イベントにイベントオブジェクトが保存されています.次の例を見てください.

<input type="button"  value="Click me" onclick="alert(event.type)"/>

Eventオブジェクトは、その特定のイベントの作成に関する属性と方法を含む.トリガされたイベントの種類は異なり、利用可能な属性や方法も異なります.ただし、すべてのイベントには下表のメンバーがいます.
属性/方法
タイプ
読みます
説明
bubbles
ボロア
読み取り専用
事件が泡を吹いているかどうかを示す.
キャンセルケーブル
ボロア
読み取り専用
イベントのデフォルトの行動をキャンセルできるかどうかを示します.
currentTarget
Element
読み取り専用
そのイベントハンドラは現在イベントを処理しています.
Detail
インテグ
読み取り専用
イベントに関する詳細情報
eventPhite
インテグ
読み取り専用
イベントハンドラを呼び出した段階:1はキャプチャ段階、2は「ターゲットにある」、3は発泡段階を表します.
preventDefault()
Function
読み取り専用
イベントのデフォルトをキャンセルします.キャンセルケーブルがtrueなら、この方法が使えます.
stopPropagation()
Fucntion
読み取り専用
イベントのさらなる捕獲または発泡をキャンセルします.bubblesがtrueであれば、この方法が使えます.
タージ
Element
読み取り専用
事件の狙い
タイプ
String
読み取り専用
トリガーされたイベントの種類
ビュー
AbstractView
読み取り専用
イベントに関連する抽象的なビュー.事件が発生したのと同じWindowsオブジェクト
イベントハンドラ内では、オブジェクトthisは常にcurrentTargetの値に等しく、targetはイベントの実際の目標のみを含む.イベントハンドラを直接ターゲット要素として制定すると、this、currentTarget、targetは同じ値を含む.次の例を見てみます.

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

    alert(event.currentTarget === this);     // true

    alert(event.target === this)    //true

};

この例では、currentTargetとtargetとthisの値を検出した.clickイベントの目的はボタンですので、この3つの値は同じです.イベントハンドラがボタンの親ノードに存在する場合、これらの値は異なる.
 

document.body.onclick = function(event){

    alert(event.currentTarget === document.body);  //true

    alert(this === document.body);   //true

    alert(event.target === document.getElementById("myBtn"))  //true

};

この例のボタンをクリックすると、thisとcurrentTargetはいずれもdocument.bodyに等しくなります.イベントハンドラはこの要素に登録されているからです.しかし、target要素はボタン要素に等しく、これはclickイベントの真の目標である.ボタンにイベントハンドラが登録されていないので、その結果、clickイベントはDcument.bodyに泡ができて、そこで事件が処理されました.特定のイベントのデフォルトの挙動を阻止するには、preventDefault()の方法が使用されます.例えば、リンクのデフォルトの動作は、クリックされるとhref特性が指定するURLにナビゲーションされます.リンクガイドのデフォルト動作を阻止するには、下記の例のように、Oclickイベントハンドラを介してキャンセルできます.

var link = document.getElementById("myLink");

link.onclick = function(event){

    event.preventDefault();

};

 
cancenlable属性がtrueに設定されているイベントだけが、preventDefault()を使用してデフォルトをキャンセルすることができます.さらに、STopPropagation()方法は、DOMレベルでのイベントの伝播を即座に停止するために使用され、すなわちさらなるイベントの捕獲または発泡をキャンセルする.例えば、ボタンに直接追加されたイベントハンドラは、以下の例に示すように、ドキュメンタ.bodyに登録されたイベントハンドラをトリガすることを避けるために、stopPropagationを呼び出すことができる.

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

    alert("Clicked");

    event.stopPropagation();

};

document.body.onclick = function(event){

    alert("Body clicked");

};

この例では、stopPropagation()を起動しないと、ボタンをクリックしたときに2つの警告ボックスが表示されます.しかし、clickイベントはDcument.bodyにはまったく伝播しませんので、この要素に登録されているonclickイベントハンドラをトリガしません.イベントオブジェクトのeventPhite属性は、イベントが現在イベントフローのどの段階にあるかを決定するために使用されてもよい.キャプチャフェーズでイベントハンドラを起動するなら、eventPhiteは1に等しく、イベントハンドラが対象となるとeventPhiteは2に等しくなり、発泡段階で起動したイベントハンドラなら、eventPhiteは3に等しい.なお、「ターゲットにある」というのは発泡段階で発生しているにもかかわらず、eventPhiteは依然として2に等しい.例を見ると:

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

    alert(event.eventPhase);   //2

};

document.body.addEventListener("click",function(event){

    alert(event.eventPhase);   //1

},true);

document.body.onclick = function(event){

    alert(event.eventPhase);   //3

};

この例のボタンをクリックすると、まず実行されるイベントハンドラは、Trapフェーズでトリガされたdocuement.bodyに追加されたもので、結果として警告枠がイジェクトされてevent Phaseの1として表示されます.次に、ボタンに登録されたイベントハンドラがトリガされます.この時のeventPhite値は2で、最後にトリガされたイベントハンドラは、発泡段階で実行されたdocument.bodyに追加されたもので、eventPhiteの値は3と表示されます.eventPhiteが2に等しい場合、this、target、currentTargetは常に同じです.
イベントハンドラの実行中にのみイベントオブジェクトが存在し、イベントハンドラの実行が完了するとイベントオブジェクトが破壊されます.IEのイベントオブジェクト
DOMにアクセスするイベントオブジェクトとは異なり、IEにアクセスするイベントオブジェクトは、イベントハンドラを指定する方法によっていくつかの異なる方法がある.DOM 0レベルのメソッドを使用して処理プログラムを追加すると、イベントオブジェクトはwindowオブジェクトの属性として存在します.次の例を見てみます.

var btn = document.getElementById("myBtn");

btn.onclick = function(){

    var event = window.event;

    alert(event.type);  //"click"

};

しかし、イベントハンドラがatachEvent()を使用して追加されると、パラメータとしてイベントハンドラ関数にイベントハンドラが入ってきます.

var btn = document.getElementById("myBtn");

btn.attachEvent("onclick",function(event){

    alert(event.type);  //"click"

});

このようにatachEvent()を使う場合は、windowオブジェクトを通じてイベントオブジェクトにアクセスすることもできます.ただし、便宜上、同じオブジェクトもパラメータとして伝達されます.HTML特性で指定されたイベントハンドラであれば、イベントオブジェクトに対してもイベントという変数でアクセスすることができます.

<input type="button"  value="Click me" onclick="alert(event.type)"/>

IEのイベントオブジェクトもまた、そのイベントを作成することに関連する属性および方法を含む.これらの多くの属性および方法は、対応するものまたは関連するDOM属性および方法があるが、全てのイベントオブジェクトには、次の表の属性および方法が含まれている.
属性/方法
タイプ
読みます
説明
cancel Bbbles
ボロア
読みます
デフォルトの値はfalseですが、trueに設定すると、イベントの泡がキャンセルされます.(DOMのstopPropopopopopopopopopopopopopopopopop Prop()メソッドと同じです.)
return Value
ボロア
読みます
デフォルトの値はtrueですが、falseに設定するとイベントのデフォルトの動作がキャンセルされます(DOMのpreventDefault()方法と同じです).
srcele ment
Element
読み取り専用
イベントのターゲット(DOMの中のtarget属性と同じ)
タイプ
String
読み取り専用
トリガーされたイベントの種類
イベントハンドラのスコープは指定された方法で決定されるので、常にイベントのターゲットに等しいとは思えない.だから、event.srcellementを使ったほうがいいです.たとえば:

var btn = document.getElementById("myBtn");

btn.onclick = function(){

    alert(window.event.srcElement === this);  //true

};



btn.attachEvent("onclick",function(event){

    alert(event.srcElement === this);  //false

});

第一のイベントハンドラ(DOM 0級の方法で指定)では、srcelementの属性はthisに等しいが、第二のイベントハンドラではthisはwindowに等しいので、両者の値は違っています.ブラウザをまたぐイベントオブジェクト
DOMとIEのイベントオブジェクトは異なるが、それらの間の類似性に基づいてブラウザを横切るスキームを依然として取り出すことができる.IE中のイベントオブジェクトのすべての情報と方法DOMオブジェクトの中にありますが、実装方法は異なります.しかし,この対応関係は二つのイベントモデル間のマッピングを容易にする.

var EventUtil = {

    addHandler:function(element,type,handler){

        if(element.addEventListener){

            element.addEventListener(type,handler,false);

        } else if(element.attachEvent){

            element.attachEvent("on"+type,handler);

        } else {

            element["on"+type] = handler;

        }

    },

    getEvent:function(event){

        return event ? event : window.event;

    },

    getTarget:function(event){

        return event.target || event.srcElement

    },

    preventDefault:function(event){

        if(event.preventDefault){

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

    },

    removeHandler:function(element,type,handler){

        if(element.removeEventListner){

            element.removeEventListner(type,handler,false);

        } else if(element.detachEvent){

            element.detachEvent("on"+type,handler);

        } else {

            element["on"+type] = null;

        }

    },

    stopPropagation:function(event){

        if(event.stopPropagation) {

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

        }

    }

};