腳本之家服務器常用軟件

快捷導航

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

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

在js中自定義一個類跟java c++就有比較大的區(qū)別了，因為這個格式用公式表達起來比較困難，大體說一下吧

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

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

復制代碼代碼如下:

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

(喂這也太簡單了吧魂淡(|||￣—￣)==o(#)￣▽￣)∕ )
恩。。總之大體意思懂了就好了。。

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

復制代碼代碼如下:

 
<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 指出錯誤！)
此處注意事項：
1.typeof a的類型function是小寫，因為js大小寫敏感，所以必須注意。
2.Huidiao(test) test不需要寫出括號，因為它的參數(shù)就僅僅是一個變量，如果寫成(test()),那么函數(shù)會執(zhí)行test();這個函數(shù)，但是Huidao函數(shù)不執(zhí)行，因為test()沒有返回值，那個么Huidiao的參數(shù)其實是未定義的。
輸出大家都想得到的。。
然后再說一句：Javascript中沒有重載。不要癡心妄想了騷年~ㄟ(￣v￣ㄟ)

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

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

鼠標事件

鍵盤事件

HTML事件

變動事件

onclick 單擊事件

ondblClick 雙擊事件

onmouseover 鼠標移到上方

onmouseout 　鼠標離開事件　

onmousedown 鼠標按下事件

onmouseup 鼠標放開事件

onselect 選中事件

onkeydown 按鍵事件

onkeypress 按下鍵事件

onkeyup 放開鍵事件

onload 窗口加載事件

onunload 窗口離開事件

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

onabort 中斷事件

onerror 異常事件

onreset 按下重置按鈕事件

onsubmit 提交事件

onblur 失去焦點事件

onfocus 獲得焦點事件

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

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

復制代碼代碼如下:

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

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

但對于第二種來說，用的很少，我百度了半天，查了window對象的事件，測試了許多，但是只有onload事件是可行的，代碼如下：

復制代碼代碼如下:

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

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

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

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

在添加控件的時候，給控件一個ID，但后在javascript里面利用ID拿到這個控件，然后對它的各種事件進行操作，比如：

復制代碼代碼如下:

 
<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文本框添加了一個事件響應，這里要強調(diào)一點：script響應必須寫在控件聲明之后，否則編譯器就無法根據(jù)ID找到控件了。

PS，其實也可以根據(jù)name找到控件，但是還是建議用ID，因為name可以相同，id不可以相同

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

其實我還是比較推薦下載一下這個手冊的，挺好的一工具。

簡單介紹了事件處理后，我們學習一下Event對象

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

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

復制代碼代碼如下:

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

事件程序綁定：

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

因為比較抽象，我們還是寫個代碼，心里踏實點。

復制代碼代碼如下:

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

由于對于不認識的語句瀏覽器會忽略，我們可以直接像我上面寫的，寫出兩行代碼來遷就這倆，同時還有另一個辦法可以讓它縮為一句，就是obj.innerHTML=s;

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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