|
首先是最常規(guī)的方法：
 程序代碼<p id="para" title="cssrain demo!" onclick="test()" >test</p> <script> function test(){ alert("test"); } </script> 當(dāng)某一天,，我們知道JavaScript要跟HTML結(jié)構(gòu)實現(xiàn)分離后,，就會改了一種寫法: 程序代碼<p id="para" title="cssrain demo!">test</p> <script> function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onclick = test; } </script> 當(dāng)我們工作越來越久后,，有時候我們需要對某個元素綁定多個相同的事件類型： 程序代碼<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> 如果按照上面的寫法,，我們只能輸出第二個函數(shù),。 這時候我們需要用到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> 在一段時間內(nèi),，你并沒發(fā)現(xiàn)這段代碼有任何錯誤,。 某一天,，一個名叫firefox的瀏覽器 闖入你的視野,，當(dāng)我們把這段代碼放到firefox中執(zhí)行后， 發(fā)現(xiàn)并不能正常運行,。 問題就這樣,，越來越多，然而作為一名JS程序員,，這些都是必須面對的,。 為了解決這段代碼的平臺兼容性問題，我翻翻手冊,，知道了firefox跟ie的區(qū)別： 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> 此時,，代碼就可以在多個平臺上工作了,。 但隨著水平的進(jìn)步,，你不滿足每次都去判斷，你想把這個判斷封裝起來,，以后可以直接調(diào)用： 程序代碼<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> 至此,，作為一個程序員的工作就完了。 中間我們從一個最傳統(tǒng),，最基本的寫法 ,， 然后實現(xiàn)Js和HTML的分離，然后又實現(xiàn)對同一個元素注冊多個事件,，期間,，我們發(fā)現(xiàn)注冊事件的兼容性問題。最后我們對注冊事件的方法進(jìn)行封裝,，方便以后使用,。 好了，文章寫到這里,。希望大家有收獲哦,。。,。 原文屬于cssrain.cn原創(chuàng),，轉(zhuǎn)載請注明。 |
|
|
