JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ
Posted: Updated:
JavaScript ( != jQuery ) を勉強してます
最近、jQueryからJavaScriptに改宗を企てています。node.jsとかTitaniumとかやってみたいので、JavaScriptとして勉強し直しです。ブラウザやDOMのことを省いたらシンプルな言語ですし、柔軟で楽しい言語ですよね。
さて、業務でその取り組みを強行しようとしたところ、案の定Internet Explorer特有の仕様に悩まされたので、簡単なところで違いをまとめてみました。
Internet Explorerのことを教えていただいたり
var elm = evt.target || evt.srcElement;も RT: @ahomu var evt = e || window.event;
そんな中、@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の簡易解説 )
なるほど、わろす。