JS和HTML分離:注冊事件的方法進行封裝

2024-09-06 12:40:52

字體：大中小

來源：轉載

供稿：網友

原文：http://www.cssrain.cn/article.asp?id=985

首先是最常規的方法：

<p id="para" title="cssrain demo!" onclick="test()" >test</p>
<script>
function test(){
alert("test");
}
</script>

當某一天，我們知道javascript要跟html結構實現分離后，就會改了一種寫法：

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
window.onload = function(){
document.getelementbyid("para").onclick = test;
}
</script>

當我們工作越來越久后，有時候我們需要對某個元素綁定多個相同的事件類型：

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
document.getelementbyid("para").onclick = test;
document.getelementbyid("para").onclick = pig;
}
</script>

如果按照上面的寫法，我們只能輸出第二個函數。
這時候我們需要用到attachevent方法：

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
document.getelementbyid("para").attachevent("onclick",test);
document.getelementbyid("para").attachevent("onclick",pig);
}
</script>

在一段時間內，你并沒發現這段代碼有任何錯誤。

某一天，一個名叫firefox的瀏覽器闖入你的視野，當我們把這段代碼放到firefox中執行后，

發現并不能正常運行。問題就這樣，越來越多，然而作為一名js程序員，這些都是必須面對的。

為了解決這段代碼的平臺兼容性問題，我翻翻手冊，知道了firefox跟ie的區別：

firefox中注冊事件使用：addeventlistener方法，同時為了兼容ie，我們必須用到if ... else...

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
window.onload = function(){
         var element = document.getelementbyid("para");
         if(element.addeventlistener){ // firefox , w3c
                element.addeventlistener("click",test,false);
    element.addeventlistener("click",pig,false);
         } else {   // ie
    element.attachevent("onclick",test);
    element.attachevent("onclick",pig);
         }
}
</script>

此時，代碼就可以在多個平臺上工作了。

但隨著水平的進步，你不滿足每次都去判斷，你想把這個判斷封裝起來，以后可以直接調用：

<p id="para" title="cssrain demo!">test</p>
<script>
function test(){
alert("test");
}
function pig(){
alert("pig");
}
function addlistener(element,e,fn){
     if(element.addeventlistener){
          element.addeventlistener(e,fn,false);
     } else {
          element.attachevent("on" + e,fn);
     }
}
window.onload = function(){
         var element = document.getelementbyid("para");
         addlistener(element,"click",test);
         addlistener(element,"click",pig);
}
</script>