JavaScript 注冊事件代碼

2019-11-20 23:57:50

字體：大中小

來源：轉載

供稿：網友

首先是最常規的方法：
程序代碼

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