とことん標準に拘ったCSS切り替えスクリプト（その1）

CSS切替スクリプトを書いてみる（徒書）で、なるべくDOM標準に沿った感じのCSS切替スクリプトが模索されているようです。一度徹底的なものを書いてみたかったので、私も考えてみようと思います。「標準」ふぇちではなくて単に「CSS切り替えスクリプト」に興味があるという方は、ある意味読まないほうが無難です。

拠り所としてはこれらを参考にすればよかろうと思われます：

• 15 ネイティブ ECMAScript オブジェクト (Native ECMAScript Objects)
• DOM Level 2 Core（Level 1込み）
• DOM Level 2 Style Sheets
• DOM Level 2 CSS
• DOM Level 2 Events（HTMLEvents）

さてここで、document.writeメソッドはDOM Level 2 HTMLに規定されていますから、これはHTML、XHTML1.0文書においてはきちんと「標準」に準拠していることになります。しかしこの仕様の対象外である、XHTML1.1文書等のXMLブラウザで表示させるような文書については駄目です。私のサイトの文書はXHTML1.0準拠ですからdocument.writeに頼りまくっていますが、ここではこのメソッドを、言い換えるとDOM Level (1|2) HTML を考えないことにします。

北村さんのスクリプトを叩き台にして

まず、「叩き台」の意味を誤解しないでください。ほぼ無意味な注意書きですが一応。

今回は、addEvent関数を見てみます。

function addEvent(obj, eventType, func) {
    if (obj.addEventListener) {
        obj.addEventListener(eventType, func, false);
    } else if (obj.attachEvent) {
        /* WinIE5-6用 */
        obj.attachEvent('on' + eventType, func);
    } else {
        /* MacIE5用 */
        if (eventType == 'load') {
            obj.onload = func;
        } else if (eventType == 'change') {
            obj.onchange = func;
        }
    }
}

CSS切替スクリプト - 徒委記より

これは主にwindow.onloadの代替に使用されるものだと思われました。疑問に思うのは、window.addEventListenerは「可能」か、言い換えるとwindowオブジェクトがEventTargetインターフェイスを持っていることを何が保障してくれているのかということです。

The EventTarget interface is implemented by all Nodes in an implementation which supports the DOM Event Model. Therefore, this interface can be obtained by using binding-specific casting methods on an instance of the Node interface. The interface allows registration and removal of EventListeners on an EventTarget and dispatch of events to that EventTarget.

Document Object Model Events より

windowオブジェクトはall Nodes に含まれるのでしょうか。DOMツリーとしてはHTMLの上に最上位ノードの#documentがあって終わりです。

同じ疑問を持っている人が誰もいないようなので不安なのですが、Mozillaが実装しているwindow.addEventListenerというのは、ひょっとして、DOM Level 2 Eventとは何の関係も無いのではないでしょうか?

その他 1 実装判別

if (obj.addEventListener)という書き方は推奨されますが、同名異質のメソッドである可能性があります。各メソッドごとにその危険性を生じるよりは、if (document.implementation) でただ一回だけその危険性をあえて甘受し、if (document.implementation.hasFeature('HTMLEvents', '2.0'))で判別した方が良かろうと私は考えます。

その他 2 コードの簡略化

これは標準とは何の関係もありませんが、この分岐は必要ありません：

        if (eventType == 'load') {
            obj.onload = func;
        } else if (eventType == 'change') {
            obj.onchange = func;
        }

次のように書けます。

obj["on"+eventType] = func;