JavaScript中のイベント:イベント対象

4398 ワード

JavaScript

DOM上のあるイベントをトリガーすると、イベントに関するすべての情報がこのオブジェクトに含まれているイベントオブジェクトイベントが発生します.すべてのブラウザはイベントをサポートしていますが、サポート方法は異なります.
一、DOM中のイベントの対象
DOM対応のブラウザは、DOM 0レベルまたはDOM 2レベルを使用しても、イベントハンドラにイベントオブジェクトを着信させます.
イベントオブジェクトに含まれる属性の一部または方法は以下の通りです.
bubbles:事件が泡を立てるかどうかを表明します.
cancenlable:イベントのデフォルトをキャンセルすることができるかどうかを示します.
currentTarget:そのイベントハンドラは現在イベントのその要素を処理しています.
defaul Prvent ted:trueのためにpreventDefaul()を呼び出したことを表明します.
イベントハンドラを呼び出すフェーズ.1は捕獲、2は「目標に立つ」、3は発泡.
preventDefaul():イベントのデフォルトをキャンセルします.cancenlableはtrueで利用できます.
stopImmediatePropagation():イベントのさらなる捕獲または発泡をキャンセルします.同時に、イベントハンドラが起動されないようにします.
stopPropagation():イベントのさらなる捕獲や発泡をキャンセルします.バグはtrueで利用できます.
target:イベントターゲット
イベントハンドラ内では、オブジェクトthisは常にcurrentTargetの値に等しく、targetはイベントの実際の目標のみを含む.イベントハンドラを直接ターゲット要素に指定した場合、この3つの値は同じです.例えば:

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
    alert(event.currentTarget===this);        //true
    alert(event.target===this);               //true
};

イベントハンドラがボタンの親ノードに存在する場合、これらの値は異なる.例えば:

document.body.onclick=function(event){
    alert(event.currentTarget===document.body);       //true
    alert(this===document.body);                                 //true
    alert(event.target===document.getElementById(myBtn);　　//true
};

上のコードの中で、target要素はボタン要素に等しいです.clickイベントの本当の目標です.ボタンのイベントハンドラのため、Dcument.body処理に泡が発生します.
注意イベントの対象はイベントハンドラの実行中にのみ存在し、プログラムの実行が完了すると破棄されます.
二、IEにおけるイベントオブジェクト
DOMにアクセスするイベントオブジェクトとは異なり、IEにアクセスするイベントオブジェクトは、イベントハンドラを指定する方法によっていくつかの異なる方法がある.
DOM 0レベルを使用する場合:イベントオブジェクトはwindowオブジェクトの属性として存在します.
atachEvent()を使用する場合:パラメータとしてイベントハンドラ関数にイベントオブジェクトが入ります(同時にwindowオブジェクトを通じてイベントオブジェクトにアクセスすることもできます.DOM 0と同じです.).
次の例を見てください

//DOM0 
var btn=document.getElementById("myBtn");
btn.onclick=function(){
    var event=window.event;
    alert(event.type);        //"click"
};

//attachEvent()
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(event){
    alert(event.type);        //"click"
});

IEのイベントオブジェクトに含まれる属性の一部の方法は以下の通りである.
cancel Bubble:デフォルト値はfalseです.trueに設定すると、イベントの泡がキャンセルされます.
returnValue:デフォルト値はtrueであり、falseとして設定するとイベントのデフォルトの動作がキャンセルされます.
srcelement:イベントのターゲット(DOMの中のtarget属性と同じ).
イベントハンドラのスコープは指定された方式で決められているので、常にイベントのターゲットに当たるとは思えません.だから、event.srcelementを使ったほうがいいです.
三、ブラウザをまたぐイベントの対象

var EventUtil={
    addHandler:function(element,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){
       //   
    },
    stopPropagation:function(event){
        if(eventstopPropagation){
            event.stopPropagation();
        }else{
        event.cancelBubble=true;
        }
    }
};

btn.onclick=function(event){
    event=EventUtil.getEvent(event);
};

以上のコードは、DOM対応のブラウザでは、イベント変数は単に着信とリターンだけです.IEではイベントパラメータは定義されていないので、Windows.eventに戻ります.この行のコードをイベントハンドラの先頭に追加すると、いつでもイベントオブジェクトを使用できるようになります.ユーザがどのブラウザを使うか心配することなく、いつでも使用できるようになります.
四、イベントハンドラのスコープ
DOM対応のブラウザでは、イベントハンドラのthisは要素自体を指す.
IEでは、DOM 0レベルの方法を使用して、thisは元素自体を指す.そして、atachEvent()を使用すると、this==windowとなる.

javascript Rangeオブジェクトはブラウザにまたがってよく使う(上)