大量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>