JavaScript のクロスブラウザー イベント (グラフィック チュートリアル)

まず第一に、イベント処理、イベント オブジェクト、イベントの伝播の防止などのメソッドやオブジェクトにはブラウザーの互換性の問題があることに注意してください。開発プロセスでは、汎用イベント処理ツールを作成するのが最善です。それでは、JavaScript でのクロスブラウザー イベント操作の基本的なメソッドを見てみましょう。

バインド解除イベント は、基本的にバインド イベントと同じです。

受信ハンドラーは、イベントをバインドするときに渡されたものと同じである必要があります (同じ関数を指す)

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理，IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加'on'
    //IE9也可以这样绑定
    element.attachEvent('on' + type,handler);
  }
  //DOM0级事件处理步，事件流也是冒泡
  else{
    element['on' + type] = handler;
  }
};

クロスブラウザーでイベントを追加

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent('on' + type,handler);
  }
  else{
    //属性置空就可以
    element['on' + type] = null;
  }
};

クロスブラウザーでイベントを削除

  function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent('on'+type,fn);
    }
  }

クロスブラウザーでデフォルトを防止動作

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent('on'+type,fn);
  }
}

ブラウザ間でターゲットオブジェクトを取得します

function preDef(ev){
    var e = ev || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue =false;
    }
  }

ブラウザ間でスクロールバーの位置を取得します

function getTarget(ev){
  if(ev.target){//w3c
    return ev.target;
  }else if(window.event.srcElement){//IE
    return window.event.srcElement;
  }
}

ブラウザ間での視覚的なウィンドウサイズを取得します

//跨浏览器获取滚动条位置，sp == scroll position
  function getSP(){
    return{
      top: document.documentElement.scrollTop || document.body.scrollTop,
      left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
  }

上記は、私が皆さんのためにまとめたものです。今後の皆様のお役に立つことを願っております。 関連記事:

JavaScriptの動作原理の詳細な分析と回答

js (JavaScript)検証エラーを削除するEclipseについて(詳細な回答)

JavaScriptの基本的なヒント(画像とテキストのチュートリアル) 、詳細な回答) )

以上がJavaScript のクロスブラウザー イベント (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。