最大限度地分离html和javascript代码

先看以下页面：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <script type="text/javascript">
       function $(s){
        return document.getElementById(s);
    }
    function f1(){
        alert("hello world!");
    }
    function init(){
        var obj=$("btn1");
        obj.addEventListener("click",f1,false);
    }
    </script>
</head>
<body onload="init()">
<input type="button" value="Test3" id="btn1">
</body>
</html

html和JavaScript的交点只在于 body的onload事件(当然聪明的你当然会懂得怎么消灭这最后的交点，呵呵！)，细看代码你会发觉按钮（btn1）标签中不再显式的通过onclick调用某JavaScript函数，而是在JavaScript中绑定按钮标签和相关的函数，这样的话就实现表现与行为的分离，代码又变得优雅多了。

但是，细心的你会发现上面的代码在Firefox中有效，而在IE中却没有效果了。

这是因为IE和Firefox的方法在处理这个问题上是不同的，于是页面修改为以下的页面：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <script type="text/javascript">
       function $(s){
        return document.getElementById(s);
    }
    function f1(){
        alert("hello world!");
    }
    function init(){
        var obj=$("btn1");
        obj.attachEvent("onclick",f1);
    }
    </script>
</head>
<body onload="init()">
<input type="button" value="Test3" id="btn1">
</body>
</html>

不过这样的话IE倒是没有问题了，但这时Firefox就不行了，那么怎么解决呢！！

其实我们可以通过判断浏览器是IE还是Firefox来执行不同的方法，从而兼容IE和Firefox。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <script type="text/javascript">
       function $(s){
        return document.getElementById(s);
    }
    function f1(){
        alert("hello world!");
    }
    function init(){
        var obj=$("btn1");
        if(window.ActiveXObject){
            obj.attachEvent("onclick",f1);
        }else{
            obj.addEventListener("click",f1,false);
        }
    }
    </script>
</head>
<body onload="init()">
<input type="button" value="Test3" id="btn1">
</body>
</html>

注意：ActiveXObject的大小写（AXO这三个字母大写其他则小写）。

另外ie下也可以通过下面的方式来取消事件的绑定：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    function fnClick(){
        alert("你点击了一次！");
        onec.detachEvent("onclick",fnClick);
    }
    var onec;
    window.onload=function(){
        onec=document.getElementById("onec");
        onec.attachEvent("onclick",fnClick);
    }
</script>
</head>
<body>
<p id="onec">only one click</p>
</body>
</html>

但是在Firefox下的代码应该为：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    function fnClick(){
        alert("你点击了一次！");
        onec.removeEventListener("click",fnClick,false);
    }
    var onec;
    window.onload=function(){
        onec=document.getElementById("onec");
        onec.addEventListener("click",fnClick,false);
    }
</script>
</head>
<body>
<p id="onec">only one click</p>
</body>
</html>