快捷導(dǎo)航

javascript 基礎(chǔ)篇3 類，回調(diào)函數(shù)，內(nèi)置對(duì)象，事件處理

更新時(shí)間：2012年03月14日 21:37:15 作者：

在js中自定義一個(gè)類跟java c++就有比較大的區(qū)別了，因?yàn)檫@個(gè)格式用公式表達(dá)起來(lái)比較困難，大體說(shuō)一下吧

 
function 類名(參數(shù)表){ 
this.屬性; 
...... 
this.函數(shù); 
} 

這樣，函數(shù)和數(shù)據(jù)成員都是用“this.”來(lái)實(shí)現(xiàn)。
我們自己定義一個(gè)簡(jiǎn)單類student好了，然后再去構(gòu)造它，并且實(shí)現(xiàn)一個(gè)輸出函數(shù)。

復(fù)制代碼代碼如下:

 
<script LANGUAGE="JavaScript"> 
<!-- 
function student(a,b){ 
this.name = a; 
this.age=b; 
this.output=function(){ 
document.write("student: "+this.name+" age: "+this.age+"</br>"); 
} 
} 
var stu1=new student("Zhan Bo",20); 
var stu2=new student("Hu Yifei", 23); 
stu1.output(); 
stu2.output(); 
--> 
</script> 

(喂這也太簡(jiǎn)單了吧魂淡(|||￣—￣)==o(#)￣▽￣)∕ )
恩。?？傊篌w意思懂了就好了。。

匿名函數(shù)：
就是沒(méi)有名字的函數(shù) function(參數(shù)表){.......} 匿名函數(shù)是用完就被拋棄(好可憐 TvT)
回調(diào)函數(shù)：
常表現(xiàn)為一個(gè)函數(shù)的參數(shù)是另一個(gè)函數(shù)。其實(shí)這個(gè)狀況常遇到的，比如java里給控件添加一個(gè)listener的時(shí)候，listener的參數(shù)其實(shí)是個(gè)函數(shù)。
這個(gè)函數(shù)我們就可以直接在參數(shù)里面new就可以了，就是做了個(gè)匿名函數(shù)，因?yàn)槊總€(gè)響應(yīng)都是針對(duì)這個(gè)控件的，因此一般不會(huì)有再次需要的情況。
不過(guò)我們舉個(gè)例子還是按正常的路子走。

復(fù)制代碼代碼如下:

 
<script LANGUAGE="JavaScript"> 
<!-- 
function Huidiao(a){ 
alert(typeof a);// for testing if the function has ran 
if(typeof a=='function') 
a(); 
} 
var test=function(){ 
document.write("this is testing."); 
} 
Huidiao(test); 
//--> 
</script> 

(非常感謝二樓Arliang 指出錯(cuò)誤！)
此處注意事項(xiàng)：
1.typeof a的類型function是小寫，因?yàn)閖s大小寫敏感，所以必須注意。
2.Huidiao(test) test不需要寫出括號(hào)，因?yàn)樗膮?shù)就僅僅是一個(gè)變量，如果寫成(test()),那么函數(shù)會(huì)執(zhí)行test();這個(gè)函數(shù)，但是Huidao函數(shù)不執(zhí)行，因?yàn)閠est()沒(méi)有返回值，那個(gè)么Huidiao的參數(shù)其實(shí)是未定義的。
輸出大家都想得到的。。
然后再說(shuō)一句：Javascript中沒(méi)有重載。不要癡心妄想了騷年~ㄟ(￣v￣ㄟ)

--------------------------------------------------------------------------------
接下來(lái)學(xué)習(xí)js里面的內(nèi)置對(duì)象，其實(shí)我們已經(jīng)接觸過(guò)幾個(gè)了。
常用的內(nèi)置對(duì)象： String Date Math Array Number Globle
String大家都很懂的，var s="xxxxx"; 或者 var= new String("xxxx"); 意思差不多，至于String里涵蓋的一些操作函數(shù)的話。。請(qǐng)自行下載javascript的API文檔親，我就不給連接了親，自己搜搜吧~
提供一個(gè)在線的參考手冊(cè)連接：點(diǎn)這里 http://www.dbjr.com.cn/w3school/js/jsref_obj_string.htm (這個(gè)網(wǎng)站不錯(cuò)，有空可以看看~)
每個(gè)對(duì)象的數(shù)據(jù)成員和函數(shù)成員就都有了，老師在這里一直講那些個(gè)函數(shù)，我都睡著了，其實(shí)根本沒(méi)必要講，用的時(shí)候看看就行了，熟了以后都不需要看就知道有什么啦~
然后稍微說(shuō)一下Array這個(gè)對(duì)象，實(shí)際上JS并沒(méi)有提供二維數(shù)組，but，我們可以通過(guò)嵌套來(lái)實(shí)現(xiàn)，比如
var array2=new Array(new Array(4), new Array(), new Array(1,2,3,4));

最后，除了這些常用對(duì)象外，
還有一些全局的函數(shù)和事件也需要熟悉起來(lái)，
對(duì)應(yīng)到文檔里就是function和event兩個(gè)部分。
事件處理：
事件處理是什么我覺(jué)得應(yīng)該沒(méi)有人不清楚吧，我也懶得寫概念了，因?yàn)閷懥艘矝](méi)人會(huì)記住的╮(╯▽╰)╭
然后，指定事件處理程序有三種方法：
第一：直接在HTML標(biāo)記中指定 <標(biāo)記.......事件="事件處理程序" .....>
第二：編寫特定對(duì)象特定之間的javascript <script LANGUAGE="JavaScript" for="對(duì)象" event="事件"> ........ </script>
第三：在javascript中說(shuō)明 <事件主角 - 對(duì)象><事件>=<事件處理程序>;
常用的事件羅列一下：

鼠標(biāo)事件

鍵盤事件

HTML事件

變動(dòng)事件

onclick 單擊事件

ondblClick 雙擊事件

onmouseover 鼠標(biāo)移到上方

onmouseout 　鼠標(biāo)離開事件　

onmousedown 鼠標(biāo)按下事件

onmouseup 鼠標(biāo)放開事件

onselect 選中事件

onkeydown 按鍵事件

onkeypress 按下鍵事件

onkeyup 放開鍵事件

onload 窗口加載事件

onunload 窗口離開事件

onresize 改變窗口大小觸發(fā)事件

onabort 中斷事件

onerror 異常事件

onreset 按下重置按鈕事件

onsubmit 提交事件

onblur 失去焦點(diǎn)事件

onfocus 獲得焦點(diǎn)事件

onchange 值改變觸發(fā)事件

第一種是最常用的，比如提交啊，保存啊之類的事件，有數(shù)據(jù)庫(kù)相關(guān)操作的，都可以在script里面完成。我相信寫過(guò)網(wǎng)頁(yè)的同學(xué)肯定都接觸過(guò)的，比如我們寫一個(gè)簡(jiǎn)單的小例子：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>O.O</title> 
<script type="text/javascript" src="js/output.js"></script> 
<script LANGUAGE="JavaScript"> 
<!-- 
function alertW(){ 
alert("Button Clicked"); 
} 
--> 
</script> 
</head> 
<body> 
<input type="Button" value = "HTML" onclick="alertW();" > 
<!-- 
This is my JSP page. <br> 
--> 
</body> 
</html> 

定義一個(gè)button，然后給它一個(gè)響應(yīng)事件，其實(shí)就是第一種，當(dāng)然，因?yàn)檫@個(gè)的響應(yīng)非常簡(jiǎn)單，也可以在button控件那里直接這么寫：
<input type="Button" value = "HTML" onclick="window.alert('Button Clicked')" > （這里注意下，alert()里面的字符串用單引號(hào)，不能用雙重雙引號(hào)。）
二者效果相同的。

但對(duì)于第二種來(lái)說(shuō)，用的很少，我百度了半天，查了window對(duì)象的事件，測(cè)試了許多，但是只有onload事件是可行的，代碼如下：

復(fù)制代碼代碼如下:

 
<script LANGUAGE="JavaScript" for="window" event="onload"> 
alert("load successed"); 
--> 
</script> 

然后經(jīng)過(guò)我的仔細(xì)研究，許多事件，比如“onbeforeunload”等，都是只在IE中可行的，那么我們就毫不猶豫的放棄此方法就好。知道就行了。

PS 用百度搜一下“網(wǎng)頁(yè)制作完全手冊(cè)”，是個(gè)CHM的幫助文件，第一個(gè)出來(lái)的新浪文件就可以下載，里面東西很全，需要的話就下載來(lái)參考吧~

OK，第三種，據(jù)說(shuō)在Ajax框架里大量使用，但是作為一個(gè)不會(huì)ajax的人。。。好吧，我們慢慢學(xué)起。
第三種稍微涉及了點(diǎn)下一部分要說(shuō)的DOM。不過(guò)木有關(guān)系，不影響大局，第三種的格式看起來(lái)比較復(fù)雜，其實(shí)很簡(jiǎn)單。

在添加控件的時(shí)候，給控件一個(gè)ID，但后在javascript里面利用ID拿到這個(gè)控件，然后對(duì)它的各種事件進(jìn)行操作，比如：

復(fù)制代碼代碼如下:

 
<body> 
<input type="text" value="JS Object" id="input"> 
<script type="text/javascript"> 
var inpt=document.getElementById("input"); 
inpt.onblur=function(){ 
alert("How can you abandon me~?"); 
} 
</script> 
</body> 

這樣，我們就給text文本框添加了一個(gè)事件響應(yīng)，這里要強(qiáng)調(diào)一點(diǎn)：script響應(yīng)必須寫在控件聲明之后，否則編譯器就無(wú)法根據(jù)ID找到控件了。

PS，其實(shí)也可以根據(jù)name找到控件，但是還是建議用ID，因?yàn)閚ame可以相同，id不可以相同

關(guān)于每個(gè)控件有哪些響應(yīng)，可以在之前那個(gè)網(wǎng)站里翻翻，或者下載我說(shuō)的那個(gè)手冊(cè)，就可以了,下面的截圖就是那個(gè)手冊(cè)里關(guān)于input text控件的事件列表~當(dāng)然不止這點(diǎn)，右邊還有下拉條的~

其實(shí)我還是比較推薦下載一下這個(gè)手冊(cè)的，挺好的一工具。

簡(jiǎn)單介紹了事件處理后，我們學(xué)習(xí)一下Event對(duì)象

event對(duì)象代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài)。

在IE中可以用window.event獲取，但是FF不行，所以為了兼容，采用如下策略。。程序猿們的智慧是偉大的。

復(fù)制代碼代碼如下:

 
function eventName(event){ 
event=event|| window.event; 
................. 
} 

事件程序綁定：

<body 事件名稱="eventName(event);"></body>

因?yàn)楸容^抽象，我們還是寫個(gè)代碼，心里踏實(shí)點(diǎn)。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<style> 
<!-- 
.divstyle 
{ 
position:absolute; 
width:120px; 
height:80px; 
border:3px outset #FFFF00; 
padding-left: 4px; 
} 
//--> 
</style> 
<title>testing</title> 
<script type="text/javascript" src="js/output.js"></script> 
</head> 
<body> 
<div id="fistdiv" class= "divstyle" onmousedown="clicked(event)"></div> 
<script type="text/javascript"> 
function clicked(event){ 
event=event||window.event; 
var s; 
s="coordinate-X :"+event.clientX; 
s+="\n"+"coordinate-Y: " +event.clientY; 
var obj=document.getElementById("fistdiv"); 
obj.innerText=s; 
obj.textContent=s; alert(s); 
} 
</script> 
</body> 
</html> 

注意，此處感謝三樓 Aleax的幫助，我直接引用他的話并給出例子，關(guān)于div中的屬性innerText：

FF里面的innerText不可用，替代方法: textContent
IE: oDiv.innerText = aString; oDiv.innerHTML = aString;
FF: oDiv.textContent = aString; oDiv.innerHTML = aString;

由于對(duì)于不認(rèn)識(shí)的語(yǔ)句瀏覽器會(huì)忽略，我們可以直接像我上面寫的，寫出兩行代碼來(lái)遷就這倆，同時(shí)還有另一個(gè)辦法可以讓它縮為一句，就是obj.innerHTML=s;

這里順便說(shuō)下innerText和innerHTML的差別：innerText只接受文本，然后直接輸出，但是innerHTML識(shí)別HTML語(yǔ)句，也就是說(shuō)，如果寫
innerText="<br>Hello" ; 那么輸出就是:<br>Hello 如果寫innerHTML="<br>Hello"那么輸出是換行后的Hello。

事件冒泡問(wèn)題
事件冒泡問(wèn)題其實(shí)就是，一個(gè)操作觸發(fā)了多個(gè)響應(yīng)，比如body定義了onclick的事件，body下面的div也定義了onclick事件，那點(diǎn)了div之后，先做了div的事件響應(yīng)，然后向上冒泡，body的click事件也被觸發(fā)了。
解決的辦法也不麻煩，但是依舊要遷就IE和FF這倆好基友的矛盾：
IE里面阻止冒泡，使用：事件對(duì)象.cancelBubble=true;
FF里面阻止冒泡，使用：事件對(duì)象.stopPropagation(); （剛才查了一下，propagation [,prɔpə'ɡeiʃən] 的意思是繁殖，繁衍。。原諒我的詞匯量吧TvT）
好了為了讓這對(duì)好基友和諧相處，我們只好再做一個(gè)判斷：

復(fù)制代碼代碼如下:

 
function xxxxx(event){ 
.........; 
if(event&&event.stopPropagation) //說(shuō)明是個(gè)火狐 
event.stopPropagation(); 
else 
event.cancleBubble=true; 
} 

當(dāng)然，這個(gè)判斷要寫在下層的結(jié)點(diǎn)里，比如剛才的例子里，如果把它寫在body的click事件里，那就是做無(wú)用功了。
--------------------------------------------------------------------------------
最后，一個(gè)小應(yīng)用，是對(duì)輸入的情況判斷，我們注冊(cè)網(wǎng)站的時(shí)候常遇到的：
代碼如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<style> 
<!-- 
#checkspan 
{ 
display: none; 
color: #ff0000; 
} 
//--> 
</style> 
<title>testing</title> 
<script type="text/javascript" src="js/output.js"></script> 
</head> 
<body> 
Input: <input type="text" onblur="blured()" id="input"><span id="checkspan"></span> 
<script type="text/javascript"> 
function blured(){ 
var obj=document.getElementById("checkspan"); 
var s=document.getElementById("input").value; 
if(s.length<5) 
obj.innerHTML=" too short"; 
else{ 
obj.innerHTML=" correct"; 
obj.style.color="green" 
} 
obj.style.display="inline"; 
} 
</script> 
</body> 
</html> 