Happy Programming

document.observe('dom:loaded', function(event) {
    var item = new Image();
    item.src = 'image.jpg';
    $$('body')[0].insert(item);
    item.observe('click', function(event) {
        alert(event.element().src);
    });
});

SafariやFirefox、Operaでは問題なく写真をクリックしたときにイベントが実行される
ところがIEでは実行されない。ステータスバーにはエラーのアイコン。
メッセージを見てみると"item.observe('click', function(event){})"の部分が問題ありらしい
itemオブジェクトに対してうまくイベントが設定されないようだ。
これは下記のようにすればうまくいったりする。

document.observe('dom:loaded', function(event) {
    var item = new Image();
    item.src = 'images/small/IMG_08.jpg';
    $$('body')[0].insert(item);
    Event.observe(item, 'click', function(event) {
        alert(event.element().src);
    });
});

ただ単に'item.observe'としているか'Event.observe'としているかの違いだが、これは多分

var item = new Image();

この部分が原因なのだろう。
普段Prototype.jsを使っているとPrototype特有のメソッドなのか、Javascriptネイティブのメソッドなのか分からなくなってしまうがこの

new Image();

はJavascriptネイティブのメソッドだ。
そしてIE以外ではそれらから得たオブジェクトも'Prototype'による拡張がされているんだと思う。
ところがIEでだけその魔法（？）がかからずエラーになってしまう・・。という事なんだろう。
実際

var item = new Image();

の所を

var item = new Element('img');

と、するだけでうまくいくし、或いは

var item = new Image();

と、この状態のまま

$(item).observe('click', function(event) {});

と、$()で囲ってやるだけでもいい
似たような理由でIE以外だと

document.body.insert(elem);

はうまくいくがIEだと

$(document.body).insert(elem);
か
$$('body')[0].insert(elem);

こうしないと駄目だ