ネイティブ JavaScript 互換性テストの例_JavaScript スキル

1. スタイル シートの幅や境界線の色などの CSS を取得します (行間は除く)。主に IE6 ～ 7 は currentStyle をサポートし、標準ブラウザは getComputedStyle をサポートします。例: カプセル化された関数

。

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

function getStyle(obj,name){

if(obj. currentStyle){
return obj.currentStyle[名前];
else{
return getComputedStyle(obj,false)[名前];


Call: getStyle('color');

2. スクロール距離を取得します
document.body.scrollTop は標準ブラウザに適しています

document.documentElement.scrollTop はバージョンに適しています以下の IE9
互換性は次のように記述できます
var top = document.body.scrollTop | document.documentElement.scrollTop;

標準ブラウザ: のパラメータとしてのイベント オブジェクトイベント関数
IE の下位バージョンではイベント オブジェクト (グローバル) を直接使用する必要があります




コードをコピーします

コードは次のとおりです function (ev) { var events = ev || }

イベントはイベント オブジェクトとして使用されます

4. イベントIEのバインディング イベントをattachEvent/detachEvent(バインディングまたはキャンセル)として定義します addEventListener/removeEventListener(バインディングまたはキャンセル)
イベントバインディングにおけるパラメータは以下の通りです。関数を匿名関数にすることはできません。それ以外の場合は、
addEventListener:

target.addEventListener(type,listener,useCapture); を使用することを忘れないでください。 : ドキュメント ノード、ドキュメント、ウィンドウ、または XMLHttpRequest。
type: 文字列、イベント名。「クリック」、「マウスオーバー」、「キーダウン」などの「on」を除く。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。
useCapture: キャプチャを使用するかどうか。通常は false。例: document.getElementById("testText").addEventListener("keydown", function (event) {alert(event.keyCode); }, false);

IE の場合:

target .attachEvent(type,listener);
ターゲット: ドキュメント ノード、ドキュメント、ウィンドウ、または XMLHttpRequest。
type: 文字列、「onclick」、「onmouseover」、「onkeydown」などの「on」を含むイベント名。
リスナー: EventListener インターフェイスまたは JavaScript の関数を実装します。 例: document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

イベント バインディングのカプセル化関数:




コードをコピー


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

function addEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEvent('on' ev,fn) } else{ obj.addEventListener(ev, fn, false);

}

これがバインドされたイベント fn 関数で使用される場合、これは obj ではなくウィンドウ (IE の以前のバージョンのみにこのバグがあります) であることに注意する必要があります。



コードをコピーします


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

addEvent(document,'click',function(ev) {

var ev =ev||window.event; var target = ev.target||ev.srcElement; // イベント ソースの取得は主に IE の低バージョンでのバグです。 window alert(target) }) ; バインディングキャンセルイベント fn は関数名です

コードをコピーします


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

function RemoveEvent(obj,ev,fn){
if(obj.detachEvent){

obj.detachEvent ('on' ev,fn) } else{ obj.removeEventListener(ev, fn, false) } }

5.ajax
Ajax は XMLHttp オブジェクトを作成します 標準バージョンのブラウザおよび IE 以前のバージョンは、XMLHttp オブジェクトを作成するための
標準バージョンと互換性がありません:




コードをコピー

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


//1。オブジェクト
if(window.XMLHttpRequest)

{ var oAjax=new を作成します。 XMLHttpRequest();//標準ブラウザ } else { var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE 下位バージョン}

alert( oAjax);

6. デフォルトイベントをキャンセルする
js でのデフォルトイベントキャンセルは主に return false とPreventDefault の 2 種類です。
デフォルトイベントの return false はどのブラウザでも互換性がありますが、イベントが発生した場合は、 addEventListener がバインドされている場合、キャンセルされます。 デフォルトのイベントを失わずにデフォルトの右クリック イベントをキャンセルする例:

コードをコピーしますコードは次のとおりです:

document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function (){
return false;
}

7. call と apply の違い
call と apply は関数
を呼び出すことができます。たとえば、

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

function show(){
alert(this)
}
//show(); ポップアップウィンドウ
//show .call(); ポップアップウィンドウ
//show.call(this) // ポップアップウィンドウ
//show. call(5); //ポップアップ 5;
show.call(this,5) ; //ポップアップウィンドウ

call(this, arg1, arg2,...) call の this パラメータは主にイベント オブジェクトを参照し、後続のパラメータは関数内で使用されるパラメータであることがわかります。
call と apply を使用して主にこれを変更します。機能的には通常の関数と大きな違いはありません。 🎜>apply(this,arguments) は主にパラメータが不確実な場合に使用されます
8. DOM 取得サブタイトルの子ノードと childNodes
子は最初のレイヤーを取得することによってのみ子ノードを取得でき、ラベル ノードである必要があります
例:

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

< a href="#">テキスト 1

テキスト 2

children[0] 最初のタグchildren[0].children[0]を取得したい場合は、最初のスパンのみを取得できるため、子の長さは
childNodesのみになります。 Firefox と Google では、空のテキストの長さは 5 ですが、IE の以前のバージョン (6 ～ 8) では長さは 4 です。