Internet Explorer 4.0では多くのイベントが追加されましたが、 よく使われるのは、『マウスポインタが侵入』『マウスポインタが脱出』でしょう。

<DIV ONMOUSEOVER="test2(this)" ONMOUSEOUT="test3(this)">
    モダン焼き
</DIV>

function test2(obj) {
    obj.style.color = "red";
    obj.style.fontWeight = "bold";
}

function test3(obj) {
    obj.style.color = "black";
    obj.style.fontWeight = "normal";
}

マウスポインタが『モダン焼き』の行に入るとtest2が動いて文字が赤の太字になり、 その行から出るとtest3が動いて文字が黒の普通の線になります。

上の方法ですと、 いちいちタグでイベントが起きたときに動くプログラムを指定しなければなりません。 もっとスマートでよくある方法は、 ページ全体にイベントが起きたときに動くプログラムをあらかじめ指定しておいて、 実際にどの要素にイベントが起きたのかをそのプログラムが判定する方法です。

function redbold() {
    var src = event.toElement;      //イベントが起きたタグ
    if(src.tagName == "A") {        //タグの名前が"A"なら
        src.style.oldcolor = src.style.color;
        src.style.color = "red";
        src.style.fontWeight = "bold";
    }
}

function undo() {
    var src = event.fromElement;
    if (src.tagName == "A") {
        src.style.color = src.style.oldcolor;
        src.style.fontWeight = "normal";
    }
}

document.onmouseover = redbold;
document.onmouseout = undo;

何かのHTML要素にマウスポインタが侵入したときにreboldが動きます。 イベントが起きたHTML要素は次のようにして得られます。

    var src = event.toElement;

eventは発生したイベントに関してさまざまな情報を持つ オブジェクトです。そのひとつ、toElementプロパティは イベントが起こった要素を表します。 この要素のタグの名前が"A"ならスタイルを変えるようになっています。 <A>タグは下のほうにあるので、 そこにマウスをポイントしてみると動作が分かるでしょう。

その他にも色々なイベントが追加されましたが、それは次回に紹介します。