DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS和HTML分離:注冊事件的方法進行封裝
JS和HTML分離:注冊事件的方法進行封裝
編輯:關於JavaScript     

原文: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);
      

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved