tion %> 山东棋牌手机版
當前位置:首頁 > 建站知識

Javascript——淺析注冊事件

更新時間:2009.06.22 瀏覽次數:

首先是最常規的方法:

<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>

至此,作為一個程序員的工作就完了。
中間我們從一個最傳統,最基本的寫法 , 然后實現Js和HTML的分離,然后又實現對同一個元素注冊多個事件,期間,我們發現注冊事件的兼容性問題。最后我們對注冊事件的方法進行封裝,方便以后使用。

好了,文章寫到這里。希望大家有收獲哦。。。

烟台麻将规则 南粤风采26选5开 皇冠比分网90篮球 格力公司股票分析 福建体彩票22选5走势图 江苏哈灵麻将苹果版下载 刀塔2电竞比分网 中正配资 浙江十一选五 末成年AV女 下3d开奖结果 打什么技巧哈尔滨麻将有 真人性做爰免费视频www. 海南麻将手机版下载 德州麻将玩法 甘肃十一选五 3d试机试机号