JavaScript DOM 程式設計藝術學習筆記 02

JavaScript函式的呼叫

下面是showPic.js的完整程式碼：

function showPic(whichPic){
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
}
複製程式碼

現在需要在HTML文件裡面插入一個連結來引用這個JavaScript指令碼檔案，把下面這條語句插入在<head>元素中：

<script type="text/javascript" src="script/showPic.js"></script>
複製程式碼

事件處理函式

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當使用者點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
引用--www.w3school.com.cn/jsref/jsref…

我想在使用者點選某個連結的時候觸發一個動作，所以需要使用onclick事件處理函式。我想通過onclick函式去觸發的動作是呼叫showPic()函式，而想要呼叫這個函式就必須向它傳遞一個引數，一個帶有href屬性的元素節點。在HTML文件裡面，當我把onclick事件處理函式嵌入一些元素的時候，我需要把那些元素本身用作showPic()函式的引數。有個非常簡單而又非常有效的方法可以做到這一點：使用this關鍵字，這個關鍵字的含義是“這個物件”。具體到這個例子：

<li >
    <a href"images/fireworks.jpg" onclick="showPic(this)" title="A fireworks diplay"> firework </a>
</li>
複製程式碼

onclick事件發生的時候不僅showPic函式將被呼叫，連結點選時的預設行為也將發生。這意味著使用者還是會被帶到另一個圖片檢視視窗裡去，如果我希望這種預設行為不發生的話。。。。給某個元素新增了onclick函式後，一旦發生預定事件，相應的js程式碼就會得到執行。那些js程式碼可以返回一個結果，而這個結果將被傳遞迴onclick函式，，比如點選<li>元素時候，js返回布林值ture，onclick函式就會認為這個元素被點選了，反之，js程式碼如果返回值是false，onclick函式將認為這個元素沒有人點選。。。為了解決這個問題。可以選擇在onclick函式引數後面加上return false，這樣點選元素就不會跳轉到另外一個頁面了。

<li >
    <a href"images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks diplay"> firework </a>
</li>
複製程式碼

html DOM物件

Document 物件

每個載入瀏覽器的 HTML 文件都會成為 Document 物件。 Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。請參考：www.w3school.com.cn/jsref/dom_o…

JavaScript DOM 程式設計藝術 學習筆記 02

JavaScript函式的呼叫

事件處理函式

html DOM物件

Document 物件

DOM Element

DOM Attribute

DOM Event

相關文章

JavaScript DOM 程式設計藝術學習筆記 02