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

最新推荐文章于 2022-04-10 16:44:55 发布

转载最新推荐文章于 2022-04-10 16:44:55 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Fskjb/archive/2010/02/26/1674559.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍如何使用JavaScript在不同浏览器（如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.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 >

转载于:https://www.cnblogs.com/Fskjb/archive/2010/02/26/1674559.html