2008年12月31日

event:特徵二節

特徵一節 | 特徵二節 | 特徵三節 | 方法一節 | 方法二節

當事件發生時,會動態產生一個 event 物件,事件操控器可以由此物件讀取事件的資訊。

event 的特徵
button

內存滑鼠的按鍵。

button 的值,Firefox, Safari, Chrome 的定義:

  1. 0:左鍵。
  2. 1:中鍵,多已改為滾輪。
  3. 2:右鍵。

button 的值,IE 的定義:

  1. 0:沒有按。
  2. 1:左鍵。
  3. 2:右鍵。
  4. 3:兩鍵同時按。
  5. 4:中鍵。
  • 程式用法:

    <span onmousedown='alert( event.button )'
      style='color:red'>用滑鼠左鍵或右鍵點此</span>

  • 執行結果:

    用滑鼠左鍵或右鍵點此

clientX
clientY

clientX, clientY 內存事件發生時的座標。以文件顯示區的左上角為原點 (0, 0)。

  • 程式用法:

    <span onmouseup='alert( event.clientX +", "+  event.clientY )'
      style='color:red'>用滑鼠點此</span>
    <p>試按鍵,
    <input onkeydown='alert( event.clientX +", "+  event.clientY )' size=12>

  • 執行結果:

    用滑鼠點此

    試按鍵,

  • 上面作了兩個測試:一個用滑鼠,另一個用鍵盤。用滑鼠的測試,IE, Firefox, Safari, Chrome 都能顯示滑鼠座標。用鍵盤的測試,IE 能顯示滑鼠座標;Firefox, Safari, Chrome 則顯示 undefined。
layerX
layerY

內存事件發生時的座標。以當下展現層的左上角為原點。用 position:absolute 可以設定展現層。

  • 程式用法:

    <div style='position:absolute; width:30%; height:40px; background:#777777'
      onmouseup='alert( event.layerX +", "+  event.layerY )'>
    <center>用滑鼠點此區</center>
    </div>
    <br /><br /><br />

  • 執行結果:

    用滑鼠點此區



  • IE 無此項;Firefox, Safari, Chrome 有支援。
pageX
pageY

內存事件發生時的座標。以本頁的左上角為原點。

  • 程式用法:

    <div style='width:30%; height:40px; background:#777777'
      onmouseup='alert( event.pageX +", "+  event.pageY )'>
    <center>用滑鼠點此區</center>
    </div>

  • 執行結果:

    用滑鼠點此區
  • IE 無此項;Firefox, Safari, Chrome 有支援。
screenX
screenY

內存事件發生時的座標。以螢幕的左上角為原點。

  • 程式用法:

    <span onmouseup='alert( event.screenX +", "+  event.screenY )'
      style='color:red'>用滑鼠點此</span>
    <p>試按鍵,
    <input onkeypress='alert( event.screenX +", "+  event.screenY )' size=12>

  • 執行結果:

    用滑鼠點此

    試按鍵,

  • 上面作了兩個測試:一個用滑鼠,另一個用鍵盤。用滑鼠的測試,IE, Firefox, Safari, Chrome 都能顯示滑鼠座標。用鍵盤的測試,IE 能顯示滑鼠座標;Firefox, Safari, Chrome 則顯示 undefined。
detail

內存事件的詳細資料。依事件型態而有不同;在滑鼠事件中,此存放點擊次數。

  • 程式用法:

    <span ondblclick='alert( event.detail )'
      style='color:red'>用滑鼠雙擊此</span>

  • 執行結果:

    用滑鼠雙擊此

  • IE 無此項;Firefox, Safari, Chrome 有支援。

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。