iT邦幫忙

DAY 11
0

JavaScript學習路系列 第 11

JavaScript學習路-(11)Function-3

前兩篇一直有提到的函式呼叫方式:

function identifier (Arguments) {
statements...

return theValue;
}

但除了一般的呼叫方式以外,還有一個叫做回呼函式 (callback function),
意思就是由 A 呼叫 B 執行任務。

本來疑惑回呼函式什麼時候才會用到,但看了範例之後發現其實很常見。
例如:

// js function
function load() {
document.write("hi");
}





// html
<body onload="load();">

在此例中,由 A(瀏覽器) 呼叫 B(JavaScript)執行任務。
js 裡並沒有直接呼叫 load(); ,但是 html 依然會出現我要的結果 "hi"。

或者再看看這例:

// js function
function jump() {
alert('over');
}





// html
<input type="button" value="OK" onclick="jump();">

按下 A(按鈕)呼叫 B(JavaScript)執行任務。

不過一般工程師或者前端應該很討厭在 html 上動手動腳,
就跟 CSS 就該在或者 .css是一樣的:頁面太多指令分散會造成日後維護修改的不便。
這時候就該換個做法:

function load() {
document.write("hi");
}
window.onload = load;

在視窗讀入時,執行 load;

這裡的 load; 是沒有 () 的,因為這裡的load;是 “參考” load(); ,這部分稱為函式參考 (function reference)
函式參考這裡的名稱當成變數使用。
如果寫成 load(); 就...直接跑完了
(註:onload 事件在頁面讀完後立刻發生)

// js function
function jump() {
alert('over');
}
document.getElementById('btn').onclick = function(evt) {
jump();
}





// html
<input id="btn" type="button" value="OK">

找到 html 文件的 id 元素 "btn",當按下時執行事件函式(就是 (evt) ),執行裏面的函式。

本文同步發表於 http://azzurro.blog.aznc.cc/learn_javascript_11/


上一篇
JavaScript學習路-(10)Function-2
下一篇
JavaScript學習路-(12)猜數字遊戲
系列文
JavaScript學習路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言