最大限度地分离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 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>
<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>
<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>
<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>
<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>
