亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript 注冊(cè)事件代碼

 更新時(shí)間：2011年01月27日 13:42:08   作者：  
最基本的寫法 ，然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。
首先是最常規(guī)的方法：
程序代碼
復(fù)制代碼 代碼如下:

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

當(dāng)某一天，我們知道JavaScript要跟HTML結(jié)構(gòu)實(shí)現(xiàn)分離后，就會(huì)改了一種寫法:
程序代碼
復(fù)制代碼 代碼如下:

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

當(dāng)我們工作越來越久后，有時(shí)候我們需要對(duì)某個(gè)元素綁定多個(gè)相同的事件類型：
程序代碼
復(fù)制代碼 代碼如下:

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

如果按照上面的寫法，我們只能輸出第二個(gè)函數(shù)。
這時(shí)候我們需要用到attachEvent方法:
程序代碼
復(fù)制代碼 代碼如下:

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

在一段時(shí)間內(nèi)，你并沒發(fā)現(xiàn)這段代碼有任何錯(cuò)誤。
某一天，一個(gè)名叫firefox的瀏覽器 闖入你的視野，當(dāng)我們把這段代碼放到firefox中執(zhí)行后，
發(fā)現(xiàn)并不能正常運(yùn)行。 問題就這樣，越來越多，然而作為一名JS程序員，這些都是必須面對(duì)的。
為了解決這段代碼的平臺(tái)兼容性問題，我翻翻手冊(cè)，知道了firefox跟ie的區(qū)別：
firefox中注冊(cè)事件使用：addEventListener方法，同時(shí)為了兼容ie，我們必須用到if ... else...
程序代碼
復(fù)制代碼 代碼如下:

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

此時(shí)，代碼就可以在多個(gè)平臺(tái)上工作了。
但隨著水平的進(jìn)步，你不滿足每次都去判斷，你想把這個(gè)判斷封裝起來，以后可以直接調(diào)用：
程序代碼
復(fù)制代碼 代碼如下:

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

至此，作為一個(gè)程序員的工作就完了。
中間我們從一個(gè)最傳統(tǒng)，最基本的寫法 ， 然后實(shí)現(xiàn)Js和HTML的分離，然后又實(shí)現(xiàn)對(duì)同一個(gè)元素注冊(cè)多個(gè)事件，期間，我們發(fā)現(xiàn)注冊(cè)事件的兼容性問題。最后我們對(duì)注冊(cè)事件的方法進(jìn)行封裝，方便以后使用。

相關(guān)文章

  • JS中通過url動(dòng)態(tài)獲取圖片大小的方法小結(jié)(兩種方法)

    JS中通過url動(dòng)態(tài)獲取圖片大小的方法小結(jié)(兩種方法)

    這篇文章主要介紹了JS中通過url動(dòng)態(tài)獲取圖片大小的方法小結(jié)，本文給大家列舉了兩種方法，大家可以嘗試下看哪種方法好用，感興趣的朋友跟隨小編一起看看吧
    2018-10-10

    • 最新評(píng)論