9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎JAVASCRIPT教學
01 JavaScript 簡介 06 JavaScript的函數
02 如何開始編寫JavaScript 07 JavaScript的事件
03 變數、資料型態及陣列 08 JavaScript的流程控制
04 JavaScript的物件、方法與屬性 09 常用的視窗 (Window)物件
05 JavaScript的運算子  

07、JavaScript的事件

事件 (Event)
事件是由系統轉化使用者的動作或系統訊息而得來的。使用者的動作例子包括:按下滑鼠鍵、確定送出表單...等。

在一個網頁內,事件通常是指由瀏覽器所偵測到使用者的特定動作,瀏覽器可以根據所偵測到的事件,來進行相關動作。舉例來說,使用者點選或移動滑鼠,或是瀏覽器的載入網頁,都可以看成是事件的產生。對於特定的事件,我們可以在瀏覽器內偵測得之,並以特定的程式來對此事件做出反應,此程式即稱為「事件處理器」(Event handlers),又稱為 Callback。

事件處理的好處就是不用在主程式內檢查某事件有否發生,我們只須把要做的工作連繫到事件,當某事件真的發生了,系統就自動把這個訊息送到程式,那就會自動執行要做的工作了。

JavaScript 的事件處理者通常是連繫著物件的,因此不同的物件就支援不同的事件處理者。以下是 JavaScript 常用的事件處理器:

事件處理器 事件發生於
onBlur 使用者離開某一欄,失去焦點時
onChange 使用者改變某一欄的內容,改變物件選項或字串時
onClick 使用者按下某個按鈕,點選某一個物件時
onFocus 使用者的輸入焦點進入某一欄,得到焦點時
onLoad 某一頁完全載入,瀏覽器載入網頁時
onMouseOver 滑鼠游標在某個物件之上
onMouseOut 滑鼠游標離開某個物件
onMouseup 鬆開滑鼠按鈕時
onMouseDown 按下滑鼠按鈕時
onSelect 使用者選擇某一欄的內容
onSubmit 使用者確定送出某表單
onUnload 正在顯示的一頁被改變,瀏覽器離開網頁時

把函數指定到事件:
我們通常把那些在某事件發生後要做的工作寫成一個函數,不過如果你的工作很簡單,可以不用寫在函數內。

語法:把事件處理者寫成一個物件的 HTML 標記屬性,而屬性內容就是要執行的 JavaScript 敘述

<HtmlTag event_handler="statements">

程式範例(使用事件處理器執行函數): 看程式samp16.html執行結果

<script>
function bt_details(this_bt) {
var name = this_bt.name
var value = this_bt.value
var type = this_bt.type
document.write("My name is <b>" + name + "</b>");
document.write("<br>My value is <b>" + value + "</b>");
document.write("<br>My type is <b>" + type + "</b>");
}
</script>
<form>
<input type="button" name="hello"
value="Please Click me to see my name and value"
onClick="bt_details(this)">
</form>
例子說明:
onClick="bt_details(this)"
首先為大家介紹一個關鍵字 this , this 其實是一個物件,它是指當時正在使用中的物件。例子中的 this 是在 input 的 HTML 標記範圍內,因此 this 就是指那個 input 物件了,那個 input 物件有 type、name 和 value 三個屬性,因此 this 也有這三個屬性了。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。

onClick 是一個事件處理者,當使用者按下按鈕時,就會自動執行 onClick 屬性內容的 JavaScript 敘述。

bt_details(this) 是一個函數,輸入的參數就是一個物件 this ,亦即是該個 input 物件。

function bt_details(this_bt)
參數 this 會輸入到 this_bt 變數,成為一個物件型態的變數,而這個變數就儲存著該個 input 物件了,因此 this_bt 也有 type、name 和 value 三個屬性。

type="button"
JavaScript 定義了一個新的 <input> 類別 (Type),名叫 button ,是一個普通的按鈕。

終止事件:
你可以中途停止一個函數或事件。一般情況下都會用 return false; 來終止程序,但在處理連結物件或送出表單時, true 和 false 就有分別了,這點稍後會詳述。

語法:終止函數

return false;
或是
return true;

程式範例(終止函數return false): 看程式samp17.html執行結果

<script>
function terminate() {
document.write("Before <b>return false;</b>");
return false;
document.write("After <b>return false;</b>");
}
</script>
<form>
<input type="button" value="hello" onClick="terminate()">
</form>
例子說明:
第二句的 document.write 不會被執行,因為上一句 return false 己經中終止了 terminate 函數。

程式範例(終止函數return true): 看程式samp18.html執行結果

<a href="index.html"
onMouseOver="window.status = 'Mouse pointer is over a link' ; return true"
onMouseOut="window.status = 'Mouse pointer is moved out' ; return true">
Please move your mouse pointer over me and notice the status bar.
</a>
例子說明:
onMouseOver 和 onMouseOut
當滑鼠游標在某個連結之上時,通常瀏覽器的狀態列 (Status Bar) 就會顯示該連結的位置,當游標離開時,狀態列就會顯示預設的文字。這兩個事件處者是用來當滑鼠移到或離開連結時,改變狀態列的文字。

window.status
window 是視窗物件,表示正在使用的視窗,而 status 就是該視窗的屬性,它儲存著視窗的狀態列文字。

return true
return true 是用來表示該連結已經被跟進 (follow),那麼瀏覽器就不會把連結位置顯示在狀態列,否則,我們想顯示的文字就會被連結位置蓋過了。

留意例子中在一句內同時用了雙引號和單引號,目的是希望 HTML 的屬性內容不會和 window.status 的內容混淆。

常用事件列表:


滑鼠事件的列表
滑鼠事件 說明
onmousedown A mouse button has been pressed
onmousemove The mouse has been moved
onmouseout The mouse pointer has left an element
onmouseover The mouse pointer has entered an element
onmouseup A mouse button has been released
onclick A mouse button has been clicked
ondblclick A mouse button has been double-clicked (clicked twice rapidly)

鍵盤事件的列表
鍵盤事件 說明
onkeydown A key has been pressed
onkeypress onkeydown followed by onkeyup
onkeyup A key has been released

常用的其他事件的列表
事件名稱 說明
onblur An element loses focus
onerror An error occurs
onfocus An element gains focus
onload The document has completely loaded
onreset A form reset command is issued
onscroll The document is scrolled
onselect The selection of element has changed
onsubmit A form submit command is issued

各種產生事件的物件常用的相關性質
產生事件之物件的性質 說明
SrcElement The element that fired the event
type Type of event
returnValue Determines whether the event is cancelled
cancelBubble Can cancel an event bubble
clientX Mouse pointer X coordinate relative to window
clientY Mouse pointer Y coordinate relative to window
offsetX Mouse pointer X coordinate relative to element that fired the event
offsetY Mouse pointer Y coordinate relative to element that fired the event
button Any mouse buttons that are pressed
altKey True if the alt key was also pressed
ctrlKey True if the ctrl key was also pressed
shiftKey True if the shift key was also pressed
keyCode Returns UniCode value of key pressed

event.button 隨滑鼠的按鍵不同而有不同的值
event.button 的值 說明
1 滑鼠左鍵被按下
2 滑鼠右鍵被按下
4 滑鼠中鍵被按下

參考網站:
JavaScript Variables JavaScript KitJavaScript Source Introduction to JavaScript, NTUPT JavaScript Objects
網頁寫作記事本JavaScript 程式設計與應用:用戶端
因想再仔細的研究及學習JAVASCRIPT,因而在學習之餘,參考各網路先進網頁,編寫了基礎JAVASCRIPT教學區,也讓有需要學習JAVASCRIPT語法的網友多一個可參考的地方,若有不正確的資訊,尚望請各位先進們海涵與指正。


本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站