JavaScript

   


Event 物件


簡介

版本 4.0 的瀏覽器 (IE 4, NN 4) 支援更多新的 Event (事件), 例如滑鼠移動及按下鍵盤等, 而且把 Event 視作為一個物件來處理, 我們可以從 Event 物件來取得某事件的有關資訊。

Event 的屬性:

說明 IE NN
事件類型 type type
收到事件的元件 srcElement target
相對於元件的滑鼠水平位置 x x
相對於元件的滑鼠垂直位置 y y
相對於頁的滑鼠水平位置 clientX pageX
相對於頁的滑鼠垂直位置 clientY pageY
相對於視窗的滑鼠水平位置 screenX screentX
相對於視窗的滑鼠垂直位置 screenY screenY
滑鼠鍵或按鍵的 ASCII 碼 keyCode which
輔助鍵 (Alt, Ctrl 和 Shift 鍵) altKey
ctrlKey
shiftKey
modifiers

NN 的輔助鍵屬性 modifiers 是用二進制來表示的, 第一位元表示 Alt 鍵, 第二位元表示 Ctrl 鍵, 第三位元表示 Shift 鍵, 例如當三個鍵都被按下, modifiers 的值就是 7 , 因為 1 (Alt) + 2 (Ctrl) + 4 (Shift) = 7。 而 IE 傳回的三個屬性 altKey、ctrlKey 和 shiftKey 的值均為布林型態, 被按下就是 true, 沒被按下就是 false。

版本 4.0 瀏覽器新增的事件:

事件 說明
onDblClick 連續按兩下滑鼠
onKeyDown 按下鍵盤
onKeyPress 按下鍵盤後放開
onKeyUp 放開鍵盤
onMouseDown 按下滑鼠
onMouseMove 移動滑鼠
onMouseUp 放開滑鼠

 

NN 4 的 Event 物件

例子: NN 4 的 Event 物件

如果我們處理的 Event 是屬於那些有對應的 HTML 標記的元件, 就只須將事件處理者寫到該元件的 HTML 標記, 但如果想處理那些沒有特定的 HTML 標記的元件, 例如想取得滑鼠在整個視窗 (window)範圍內的位置, 我們就要用 Event Caputring (事件捕捉)了。

Event Capturing 三步曲:

  1. 宣告想捕捉的事件

    寫法:

    window.captureEvents(Event.EVENT)

    說明:

    • EVENT 表示你想捕捉的 Event, Event Handler (事件處理者) 的命名方法是在 Event 之前加 "on" , 而 EVENT 就沒有 "on", 而且要全部大楷。

    例子:

    • window.captureEvent(Event.MOUSEMOVE)   //捕捉滑鼠移動事件
    • window.captureEvent(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)   //同時宣告捕捉三個事件, 它們之間用 "|"分隔
  2. 宣告處理事件的函數名稱

    假設你之前已用 window.captureEvent(Event.MOUSEMOVE) 宣告要捕捉滑鼠移動, 之後就宣告處理滑鼠移動的函數名稱, 寫法如下:

    window.onMouseMouse = handle_function ;

    handle_function 就是函數名稱了。

  3. 宣告函數內容

    上一步宣告出來的函數會有一個參數。

    例子:

function handle_function (my_event) {
  alert(my_event.screenX);
}

my_event 參數是一個物件, 它代表了滑鼠移動事件, 我們可以用它來取得這事件的有關資訊。

Event Capturing 適用於 window、document 和 layer 物件

 

IE 4 的 Event 物件

例子: IE 4 的 Event 物件

我們只須寫 event.property 就可以取得當時發生的事件資訊。

IE 4 的 Event Bubbling

相信大家都見到 IE 和 NN 處理 Event 物件的分別, 它們還有一個不同之處, 就是處理層次式的元件 Event。

例子: IE 4 的 Event Bubbling

<html><head>
<script>
function msg(st) {
alert(st)
}
</SCRIPT>

</head><body>

<div onclick="msg('div')">
  <p onclick="msg('p')">
    <form onclick="msg('form')">
      <input type=button value="Event Bubbling" onclick="msg('button')">
    <form>
</p>
</div>

</body></html>

說明:

  • 頁內的 <div>、<p>、<form> 和 <input> 標記都有 onclick 事件處理者, 而當你按下 "Event Bubbling" 按鈕時, 這四個標記的 onclick 事件會由內至外逐個被處理, 就好像氣泡浮上水面, 這就叫做 Event Bubbling。 但 NN 和 Opera 就只會處理按鈕的 onclick , 而忽略其它。






[到頁頂] [首頁] [速查表]