事件處理
範例：事件的處理（例如使用者在按鈕上點一下，即產生一個事件）是 Javascript 的一個強項。在這個範例中，我們試圖說明常用的 Javascript 的事件，以及其對應 的物件。 javascript:function: JavaScript Pseudo Protocol.
說明：這個範例由兩個部分所組成：一個是 HTML 的元件，而另一個是與其配合的 Javascript 程式碼。我們依序說明 HTML 元件並解釋與其配合的程式碼；至於，整個 網頁的內容應該如何設定，請讀者自行檢視本網頁的原始碼。
- 範例中第一個部分的原始碼如下：
<a href="javascript:open_window('javascript.html')">javascript:function</a>: JavaScript Pseudo Protocol.請注意 href 的內容 javascript:open_window('javascript.html')。一般 來說，href 的內容是 URL，但是我們卻設定了一串頗為奇怪的字串。讓我們解釋一下： Javascript 提供了一個特別的用法，稱之為 JavaScript Pseudo-Protocol，而其 specifier 為 javascript:（請特別注意最後的冒號）；一般來說，javascript: 之後會加上一個函數名稱，函數可以是 Javascript 內建的函數，也可以是自行定義 的函數。例如，你可以直接在瀏覽器輸入 javascript:alert(document.links.length) 來得知目前這個網頁總共有多少超連結（links）。當然，你也可以將這段 程式碼用來取代這個範例的 href 值。 從原始碼中，我們知道如果使用者點選該連結，則瀏覽器會執行一個名為 open_window() 的函數，而該函數的程式碼如下：
<script language="javascript"> <!-- function open_window(url) { window.open(url); } // --> </script>由之前說明函數的用法，我們知道字串 javascript.html 會被傳送到 open_window() 函數中，然後該函數利用 Javascript 內見的 window.open() 函數將該 URL 在另一個新視窗中開啟。 - 範例中第二個部分的原始碼如下：
<form> <input type="button" name="Button1" value="請按我" onClick="sayhi()"> </form>
這是一個 form 元件，該元件內包含一個按鈕元件，該元件名稱為 Button1。 在按鈕元件中，我們也定義了一個事件處理的函數：onClick="sayhi()"； 該定義說明了：如果使用者在按鈕上點一下（click），則執行 sayhi() 函數， 而 sayhi() 的程式碼如下：<script language="javascript"> <!-- function sayhi() { alert("What's up, duck?"); } // --> </script>也就是說，如果使用者在"請按我"的按鈕上點一下，螢幕上會出現包含 "What's up, duck?" 訊息的 alert 視窗。 除了 onClick 事件可以定義在按鈕元件（button）之外，Javascript 還提供 哪些事件？而這些事件又可以用在哪些網頁物件呢？我們把相關資訊整理如下表：
事件 對應之物件 onLoad Documents and Framesets onUnload Documents and Framesets onSubmit Forms onClick Radio buttons, push buttons, checkboxes, and links onFocus Text fields, Password Fields onBlur Text fields, Password Fields onChange Text Fields, Scrolling Lists, and Popup Menus onMouseOver Hyperlinks onMouseOut Hyperlinks onSelect Text Fields
- 最後，我們提供一個 onLoad 的範例：使用者如果依據 本例題 方式在 <body> 內加入 onLoad，除了該例題的網頁回出現之外，在載入該例題網頁時（onLoad）也會
另開一個視窗，該視窗是我的『首頁』。由於 onLoad 可以應用於 documents 或者
framesets，所以 onLoad 適合定義於 <body> 標籤，其簡單的寫法如下：
<body onLoad="window.open('http://web.nchu.edu.tw/~jlu');">完整的 window.open 語法是 window.open("URL", "視窗名稱", "視窗的選項設定")，比較完整的解釋在該利提網頁中。由於新的瀏覽器大多會封鎖彈跳視窗，你可以 放心的允許它出現。 來開啟一個視窗。
沒有留言:
張貼留言