クロスブラウザー イベント オブジェクトの概要_JavaScript スキル

コードをコピー コードは次のとおりです。

var eventsUtil = {
getEvent : function(event) ){
イベントを返す : window.event>}; PreventDefault : function (event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true; >};
};


IE では、イベント変数が単に渡されて返されるため、window.event が返されます。したがって、イベントの戻り値は、DOM 上でも IE 上でも、eventUtil.getEvent() メソッドを使用して利用できます。
2 番目のメソッドである getTarge() メソッドと同様に、まずイベント オブジェクトのターゲット属性を検出し、存在する場合はそれを返します。IE ブラウザーの場合は、srcElement 属性を返します。互換性が保証されています。




コードをコピー

コードは次のとおりです。

btn.onclick = function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); 3 番目のメソッド、PreventDefault () メソッドイベントオブジェクトが渡される 入力するときは、まずイベントオブジェクトのPreventDefault()メソッドが利用可能かどうかを確認し、利用可能でない場合は、イベントのreturnValueをfalseに設定します。 例:

.getElementById("myLink");

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


このコードは、リンク タグのデフォルトの動作を防止します。イベント オブジェクトは、EventUtil の getEvent メソッドの戻り値から取得され、preventDefault の受信パラメーターとして使用されます。 （） 方法。

4 番目のメソッド stopPropagation() は同じメソッドを使用し、最初に DOM メソッドを試し、次に次のコードのような cancelBubble 属性を試します:

コードをコピーします コードは次のとおりです。 var btn = document.getElementById("myBtn");

btn.onclick = function(event){

alert("Clicked ");
eventUtil.getEvent(event);
document.body.onclick = function(event); {
alert(" Body clicked");
};

このメソッドはブラウザのバブリング フェーズ、またはブラウザのバブリング フェーズとキャプチャ フェーズの両方でイベントをブロックする可能性があることに注意してください。