こんにちは,
クロスブラウザとはなにか
そもそも,
サポート対象のブラウザで設計通りの表示・
動作をして, たとえ未知のブラウザであっても, そのブラウザがWeb標準に沿っているなら最低限の表示・ 動作をすること
サポート対象のブラウザについては第1回で解説した通りですが,
設計通りの表示・
そして,
では,
パターン1:標準準拠
前述の通りWeb標準関連だけでも多数の仕様が存在します。上であげたもの以外にもRFCのHTTPやCookie関連の仕様にも留意する必要があります。
Firefox,
しかし,
以下はDOM Level 2 Eventsに準拠したサンプルコードです。これはFirefox,
DOM Level 2でのイベント処理のサンプル
window.addEventListener('load',function(){
var form = document.getElementById('userform');
form.addEventListener('submit',function(evt){
if (!check()) {
evt.preventDefault();
}
},false);
function check(){
//
}
},false);
パターン2:未実装・ 独自実装
主にIEで多いのがこのパターンです。当然ですがIE以外でもバージョンが古いほど未実装に当てはまることが多くなります。具体例を挙げると,
第1回でも紹介したイベント処理用のaddEvent関数は標準準拠と独自実装の組み合わせです。DOM Level 2に準拠したブラウザではaddEventListenerを使用し,
クロスブラウザ対応のイベント処理関数
var addEvent;
if(document.addEventListener) {
addEvent = function(node,type,handler){
node.addEventListener(type,handler,false);
};
} else if (document.attachEvent) {
addEvent = function(node,type,handler){
node.attachEvent('on' + type, function(evt){
handler.call(node, evt);
});
};
}