ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のクロスブラウザー イベント (グラフィック チュートリアル)

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

亚连
リリース: 2018-05-21 13:43:28
オリジナル
1119 人が閲覧しました

まず第一に、イベント処理、イベント オブジェクト、イベントの伝播の防止などのメソッドやオブジェクトにはブラウザーの互換性の問題があることに注意してください。開発プロセスでは、汎用イベント処理ツールを作成するのが最善です。それでは、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート