大量Firefox和IE不相容的javascript代碼: runtimeStyle, event.srcElement

編寫EasyCluster 1.6的mainleft的時候，遭遇了大量Firefox和IE不一樣的js代碼，如runtimeStyle, event.srcElement, parentElement, attachEvent。這些都是IE中管用的，在Firefox中要換成style, event.target, parentNode, addEventListener。Firefox中runtimeStyle和parentElement是沒有的，而IE中style, runtimeStyle, parentElement, parentNode都是有的。

具體看下面的代碼，下面的代碼很簡單，就是給所有的tr（除了id為roottr的）加上onmouseover, onmouseout事件（滑鼠移入和移出的時候加背景和改變游標）：

    <script language="javascript">
    // process tr backgrounds and cursor
    var trarray, i, normalColor;
    trarray = document.getElementsByTagName("tr");
    <%
        // firefox or IE?
        String useragent = request.getHeader("user-agent");
        if (useragent.indexOf("Firefox") == -1) {
    %>
    for (i=0; i<trarray.length; i++) {
        if (trarray[i].id != "roottr") {
            trarray[i].attachEvent("onmouseover", ProcessMouseOver);
            trarray[i].attachEvent("onmouseout", ProcessMouseOut);
        }
    }

    function ProcessMouseOver(event)
    {
        if (event.srcElement.tagName.toLowerCase() == "td") {
            normalColor = event.srcElement.parentElement.style.backgroundColor; 
            event.srcElement.parentElement.runtimeStyle.backgroundColor  = "#F7D12A";
            event.srcElement.parentElement.runtimeStyle.cursor = "pointer";
        }
        if (event.srcElement.tagName.toLowerCase() == "a" || event.srcElement.tagName.toLowerCase() == "img") {
            normalColor = event.srcElement.parentElement.parentElement.style.backgroundColor; 
            event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor  = "#F7D12A";
            event.srcElement.parentElement.parentElement.runtimeStyle.cursor = "pointer";
        }

    }

    function ProcessMouseOut(event)
    {
        if (event.srcElement.tagName.toLowerCase() == "td") {
            event.srcElement.parentElement.runtimeStyle.backgroundColor  = normalColor;
            event.srcElement.parentElement.runtimeStyle.cursor = "";
        }
        if (event.srcElement.tagName.toLowerCase() == "a" || event.srcElement.tagName.toLowerCase() == "img") {
            event.srcElement.parentElement.parentElement.runtimeStyle.backgroundColor  = normalColor;
            event.srcElement.parentElement.parentElement.runtimeStyle.cursor = "";
        }
    }
    <%
        } else {
    %>
    for (i=0; i<trarray.length; i++) {
        if (trarray[i].id != "roottr") {
            trarray[i].addEventListener("mouseover", ProcessMouseOver, false);
            trarray[i].addEventListener("mouseout", ProcessMouseOut, false);
        }
    }

    function ProcessMouseOver(event)
    {
        if (event.target.tagName.toLowerCase() == "td") {
            normalColor = event.target.parentNode.style.backgroundColor; 
            event.target.parentNode.style.backgroundColor  = "#F7D12A";
            event.target.parentNode.style.cursor = "pointer";
        }
        if (event.target.tagName.toLowerCase() == "a" || event.target.tagName.toLowerCase() == "img") {
            normalColor = event.target.parentNode.parentNode.style.backgroundColor; 
            event.target.parentNode.parentNode.style.backgroundColor  = "#F7D12A";
            event.target.parentNode.parentNode.style.cursor = "pointer";
        }

    }

    function ProcessMouseOut(event)
    {
        if (event.target.tagName.toLowerCase() == "td") {
            event.target.parentNode.style.backgroundColor  = normalColor;
            event.target.parentNode.style.cursor = "";
        }
        if (event.target.tagName.toLowerCase() == "a" || event.target.tagName.toLowerCase() == "img") {
            event.target.parentNode.parentNode.style.backgroundColor  = normalColor;
            event.target.parentNode.parentNode.style.cursor = "";
        }
    }
    <%
        }
    %>
    </script>