有時候當某一物件的某一事件被觸發時,它所要執行的程式可能是一大串,有可能是要呼叫某一函式,也有可能同時又要呼叫另一函式。做法其實很多種啦,現在一一的介紹一下。
我們先來看看比較常見的做法是怎樣做的。
view plain | print | ? | |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE> New Document </TITLE> |
4 | <script> |
5 | function method(){ |
6 | method1(); |
7 | method2(); |
8 | method3(); |
9 | } |
10 | function method1(){ |
11 | alert("呼叫方法1"); |
12 | } |
13 | function method2(){ |
14 | alert("呼叫方法2"); |
15 | } |
16 | function method3(){ |
17 | alert("呼叫方法3"); |
18 | } |
19 | </script> |
20 | </HEAD> |
21 | <BODY> |
22 | <INPUT TYPE="button" value="點我" id="btn1" οnclick="method();"> |
23 | </BODY> |
24 | </HTML> |
當觸發onClick時會先呼叫一個主函式method(),然後再來method()函式來一一呼叫其它真正要執行的函式。
或者不用主函式直接就寫在onClick裡面。
view plain | print | ? | |
1 | <INPUT TYPE="button" value="點我" id="btn1" οnclick="method1();method2();method3();"> |
醬子乍看之下,先寫在HTML元素裡面的話,好像也蠻簡單的厚!
不過若是要在JavaScript中才來設定那些元素的那些Event來觸發那些函式的話呢?
view plain | print | ? | |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE> New Document </TITLE> |
4 | </HEAD> |
5 | <BODY> |
6 | <INPUT TYPE="button" value="點我" id="btn1"> |
7 | <script> |
8 | function method(){ |
9 | method1(); |
10 | method2(); |
11 | method3(); |
12 | } |
13 | function method1(){ |
14 | alert("呼叫方法1"); |
15 | } |
16 | function method2(){ |
17 | alert("呼叫方法2"); |
18 | } |
19 | function method3(){ |
20 | alert("呼叫方法3"); |
21 | } |
22 | document.getElementById("btn1").onclick = method; |
23 | </script> |
24 | </BODY> |
25 | </HTML> |
若有一個主函式的話,就可以設定當某元素onclick時要來觸發那個函式,再來這函式來觸發其它的函式。
但要注意一點唷,若要在JavaScript來設定且不透過主函式時:
view plain | print | ? | |
1 | //document.getElementById("btn1").onclick = method; |
2 | document.getElementById("btn2").onclick = method1; |
3 | document.getElementById("btn2").onclick = method2; |
4 | document.getElementById("btn2").onclick = method3; |
醬寫的話,就只有method3()函式會被呼叫,其它的都不會被呼叫執行到唷。
有時候可能需要某一Event能呼叫多個函式,但又不能用一個主函式來一一呼叫的話,那要怎麼辦呢?
嘿嘿~這就是本次要介紹的新方法attachEvent()。attachEvent()是IE才支援的方法,而在Mozilla中就要用addEventListener()。現在只要把原來JavaScript中的設定Event語法改成用attachEvent()就可以了。
view plain | print | ? | |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE> New Document </TITLE> |
4 | </HEAD> |
5 | <BODY> |
6 | <INPUT TYPE="button" value="attachEvent" id="btn1"> |
7 | <script> |
8 | function method1(){ |
9 | alert("呼叫方法1"); |
10 | } |
11 | function method2(){ |
12 | alert("呼叫方法2"); |
13 | } |
14 | function method3(){ |
15 | alert("呼叫方法3"); |
16 | } |
17 | |
18 | var btn1Obj = document.getElementById("btn1"); |
19 | //object.attachEvent(event,function); |
20 | btn1Obj.attachEvent("onclick",method1); |
21 | btn1Obj.attachEvent("onclick",method2); |
22 | btn1Obj.attachEvent("onclick",method3); |
23 | </script> |
24 | </BODY> |
25 | </HTML> |
不過特別的地方是當用attachEvent()函式的話,若同一個元素的某一個Event被指派了多種方法時,會依照著指派的先後順序反過來呼叫執行。所以在我範例中的結果會是:先呼叫method3(),再呼叫method2(),最後才會呼叫method1()。
若是要用在Mozilla系列的瀏覽器的話,則要改成:
view plain | print | ? | |
1 | <HTML> |
2 | <HEAD> |
3 | <TITLE> New Document </TITLE> |
4 | </HEAD> |
5 | <BODY> |
6 | <INPUT TYPE="button" value="addEventListener" id="btn1"> |
7 | <script> |
8 | function method1(){ |
9 | alert("呼叫方法1"); |
10 | } |
11 | function method2(){ |
12 | alert("呼叫方法2"); |
13 | } |
14 | function method3(){ |
15 | alert("呼叫方法3"); |
16 | } |
17 | |
18 | var btn1Obj = document.getElementById("btn1"); |
19 | //element.addEventListener(type,listener,useCapture); |
20 | btn1Obj.addEventListener("click",method1,false); |
21 | btn1Obj.addEventListener("click",method2,false); |
22 | btn1Obj.addEventListener("click",method3,false); |
23 | </script> |
24 | </BODY> |
25 | </HTML> |
addEventListener()中的第一個參數跟attachEvent()中的第一個參數是不同的,且會依照著指派的先後順序呼叫執行。所以在我範例中的結果會是:先呼叫method1(),再呼叫method2(),最後才會呼叫method3()。這部份跟attachEvent()的執行先後順序是完全相反的。
範例瀏覽:
http://abgne.myweb.hinet.net/0018/0018_1.html