Unobtrusive Scripting

Unobtrusive Scriptingってのをしりまして。いまさらですが、これは運用段階を考えてもいい感じかと思います。

『 Unobtrusive 』は、『 でじゃばらない 』、『 控え目な 』という意味らしく、
この手法の前提はJavaScriptをHTMLから分離することであり、もっというと「 動作・イベント 」と「 デザイン 」という概念自体を
分離することらしい。

つまり、DOM操作の際に、HTMLソースにガシガシイベントハンドら書いて制御したり、JavaScript内でCSSを変更したりしない。
といった感じだろうか。メリットとしては、JavaScriptが動作するブラウザに対しては、もちろん動的に処理をさせ、
JavaScriptが動作しない場合は非動的な処理を提供できるもしくは提供しないという処理系とが確立できる点、JavaScriptのメンテナンスや再利用が
非常に容易になるので、いい感じ。

実際は、イベントリスナーでイベントを取得して処理をしていくのですが、こんな感じかな。

[ JavaScript ]

///////////////////////////////////////////////////////
//共通利用イベントハンドラの追加(外部ファイル化可能)
///////////////////////////////////////////////////////

var addListener = function(tagID,eventName,funcName) {

if(! tagID) { return false; }

if(tagID.addEventListener) {

/* W3C準拠ブラウザ用 */
tagID.addEventListener(eventName, funcName, false);

/* Internet Explorer用 */
} else if(tagID.attachEvent) {
tagID.attachEvent('on'+eventName, funcName);
}
else {
return false;
}

return true;
};

///////////////////////////////////////////////////////
//実行する関数
///////////////////////////////////////////////////////

var init = function(){

/*ノードの取得*/
var clickevent = document.getElementById("clickevent");

/*実行関数*/
var Func = function(){
alert('CLICK!!!!!!!!!!!!!!!!');
}

/*イベント*/
addListener(clickevent,"click",Func);
};

///////////////////////////////////////////////////////
//init
///////////////////////////////////////////////////////

addListener(window,"load",init);

[ HTML ]

<div id="clickevent" style="border:3px solid #CCCCCC;
　　　　　　　　padding:5px; background:#FEFEFE; text-align:center;
　　　　　　　　 width:200px; cursor:pointer;">
Please On Click !!!!
</div>

ＩＥだけはイベントリスナーを設定するにはattachEvent関数を利用する点がポイントらしい。

このあたりは羽田野さんの『JavaScriptは控えめに 〜クロスブラウザ対策地獄からの脱出〜』という記事が
非常に勉強になりました。