JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ

JavaScript ( != jQuery ) を勉強してます

最近、jQueryからJavaScriptに改宗を企てています。node.jsとかTitaniumとかやってみたいので、JavaScriptとして勉強し直しです。ブラウザやDOMのことを省いたらシンプルな言語ですし、柔軟で楽しい言語ですよね。

さて、業務でその取り組みを強行しようとしたところ、案の定Internet Explorer特有の仕様に悩まされたので、簡単なところで違いをまとめてみました。

Internet Explorerのことを教えていただいたり

そんな中、@sugimoto1981 ＆ @kiyotchi 両氏には、たびたびアドバイスいただけたりで感謝しております。

クロスブラウザなポイントは、実際の開発では要所でライブラリを頼りますが、抑えておけば地雷を避けられていいはず。ここではIEの挙動にフォーカスしているので、if ( !isIE ) のパターンの先は精査していないのでご注意ください(OperaとMozillaとWebkitの違いとか)。

イベントハンドラ周り

// いきなりメソッドが違う
if ( isIE ) { // isIE = IEかどうかのbooleanが入ってると思ってくださいませ
    elem.attachEvent('onclick', mylistener);
} else {
    elem.addEventListener('click', mylistener, true);
}

function mylistener (e) {
     //イベントオブジェクトの取得
     var evt = e || window.event;

     //イベント発火元?の取得
     var elm = evt.target || evt.srcElement;

     //イベントのキャンセル
     if ( isIE ) {
          evt.returnValue = false;
     } else {
          evt.preventDefault();
     }

     //イベント伝播のキャンセル
     if ( isIE ) {
          evt.cancelBubble = false;
     } else {
          evt.stopPropagation();
     }
}

イベント周りは特にオレオレだなぁ...という印象。IE6ぐらいまでは当時の先進実装として認められますが、IE8でまで引きずってるのはどーかと。

scriptのonloadイベント

if ( isIE ) {
     script.onreadystatechange = myhandler;
} else {
     script.onload = myhandler;
}

スクリプトの動的な読み込み時に、読み込みが終わった後の処理を仕込みたいとき。（読み込んだスクリプトに依存した処理とか）

getComputedStyle的な

var style = {};
if ( isIE ) {
     style = element.currentStyle;
} else {
     style = document.defaultView.getComputedStyle(elem, '');
}

便利ですねgetComputedStyle。どっちもオブジェクト(=参照渡し)が返るみたいです。オブジェクトは参照渡し、でいいんですよね。

CSSのfloatのプロパティ名

if ( isIE ) {
     elem.style.styleFloat = 'left';
} else {
     elem.style.cssFloat = 'left';
}

素直にどっちもfloatにしてほしい。

getAttribute, setAttributeで入れるべき名前が違う

// label要素のfor属性
if ( isIE ) {
     elem.setAttribute('htmlFor', name);
} else {
     elem.setAttribute('for', name);
}
// class属性
if ( isIE ) {
     elem.setAttribute('className', class);
} else {
     elem.setAttribute('class', class);
}

classはなんとなく、elem.className的な流れで理解できるかも。

座標系

//マウスイベント時のカーソルの座標を取得
var pos = {};
if ( isIE ) {
     pos.x = evt.clientX;
     pos.y = evt.clientY;
} else {
     pos.x = evt.pageX;
     pos.y = evt.pageY;
}

//ブラウザの表示領域サイズの取得
var size = {};
if ( isIE ) {
     size.w = document.documentElement.clientWidth;
     size.h = document.documentElement.clientHeight;
} else {
     size.w = window.innerWidth;
     size.h = window.innerHeight;
}

//windowの現在のスクロール位置を取得
var pos = {};
if ( isIE ) {
     pos.w = document.documentElement.scrollLeft;
     pos.h = document.documentElement.scrollTop;
} else {
     pos.w = window.scrollX;
     pos.h = window.scrollY;
}

座標系、特にイベント時のやつはもっとパターンがありますね。まだ混乱している最中です。lol

とりあえず以上！

もっと他にもあると思うのですが、もしIEに関する特異な挙動やTIPSについて教えてくださる方は @ahomu にぜひぜひリプライくださいませ。

JavaScriptはオープンに書かれている感じでいいですね。ライブラリの挙動が不明でも、ライブラリのコードそのものに下って追いかけることができますし。:-)

ブラウザ以外で動くJavaScriptにも手を出す予定です。ではでは。

タイムリーだったので

一人前のJavaScript使いになるためには、ブラウザの違いに翻弄されて目を血走らせながら「IEがぁ、IEがあぁぁ」と叫ぶ儀式を通過しなければいけない。 ( プログラミング言語人気TOP10の簡易解説 )

なるほど、わろす。

---