HTML DOM Event 對象

HTML DOM Event 對象執行個體

哪個滑鼠按鍵被點擊？

游標的座標是？

被按的按鍵的 unicode 是？

相對於螢幕，游標的座標是？

shift 鍵被按了嗎？

哪個元素被點擊了？

哪個事件類型發生了？

Event 對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鍵的狀態。

事件通常與函數結合使用，函數不會在事件發生前被執行！

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 標準).

事件控制代碼　(Event Handlers)

HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當使用者點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標籤以定義事件的行為。

屬性	此事件發生在何時...	IE	F	O	W3C
onabort	映像的載入被中斷。	4	1	9	Yes
onblur	元素失去焦點。	3	1	9	Yes
onchange	域的內容被改變。	3	1	9	Yes
onclick	當使用者點擊某個對象時調用的事件控制代碼。	3	1	9	Yes
ondblclick	當使用者雙擊某個對象時調用的事件控制代碼。	4	1	9	Yes
onerror	在載入文檔或映像時發生錯誤。	4	1	9	Yes
onfocus	元素獲得焦點。	3	1	9	Yes
onkeydown	某個鍵盤按鍵被按下。	3	1	No	Yes
onkeypress	某個鍵盤按鍵被按下並鬆開。	3	1	9	Yes
onkeyup	某個鍵盤按鍵被鬆開。	3	1	9	Yes
onload	一張頁面或一幅映像完成載入。	3	1	9	Yes
onmousedown	滑鼠按鍵被按下。	4	1	9	Yes
onmousemove	滑鼠被移動。	3	1	9	Yes
onmouseout	滑鼠從某元素移開。	4	1	9	Yes
onmouseover	滑鼠移到某元素之上。	3	1	9	Yes
onmouseup	滑鼠按鍵被鬆開。	4	1	9	Yes
onreset	重設按鈕被點擊。	4	1	9	Yes
onresize	視窗或架構被重新調整大小。	4	1	9	Yes
onselect	文本被選中。	3	1	9	Yes
onsubmit	確認按鈕被點擊。	3	1	9	Yes
onunload	使用者退出頁面。	3	1	9	Yes

滑鼠 / 鍵盤屬性

屬性	描述	IE	F	O	W3C
altKey	返回當事件被觸發時，"ALT" 是否被按下。	6	1	9	Yes
button	返回當事件被觸發時，哪個滑鼠按鍵被點擊。	6	1	9	Yes
clientX	返回當事件被觸發時，滑鼠指標的水平座標。	6	1	9	Yes
clientY	返回當事件被觸發時，滑鼠指標的垂直座標。	6	1	9	Yes
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。	6	1	9	Yes
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。	No	1	9	Yes
relatedTarget	返回與事件的目標節點相關的節點。	No	1	9	Yes
screenX	返回當某個事件被觸發時，滑鼠指標的水平座標。	6	1	9	Yes
screenY	返回當某個事件被觸發時，滑鼠指標的垂直座標。	6	1	9	Yes
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。	6	1	9	Yes

IE 屬性

除了上面的滑鼠/事件屬性，IE 瀏覽器還支援下面的屬性：

屬性	描述
cancelBubble	如果事件控制代碼想阻止事件傳播到包容對象，必須把該屬性設為 true。
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出滑鼠的元素。
keyCode	對於 keypress 事件，該屬性聲明了被敲擊的鍵產生的 Unicode 字元碼。對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。
offsetX,offsetY	發生事件的地點在事件來源元素的座標系統中的 x 座標和 y 座標。
returnValue	如果設定了該屬性，它的值比事件控制代碼的傳回值優先順序高。把這個屬性設定為 fasle，可以取消發生事件的源元素的預設動作。
srcElement	對於建置事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入滑鼠的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

標準 Event 屬性

下面列出了 2 級 DOM 事件標準定義的屬性。

屬性	描述	IE	F	O	W3C
bubbles	返回一個布爾值，指示事件是否是起泡事件類型。	No	1	9	Yes
cancelable	返回一個指示布爾值，指示事件是否可擁可取消的預設動作。	No	1	9	Yes
currentTarget	返回其事件監聽器觸發該事件的元素。	No	1	9	Yes
eventPhase	返回事件傳播的當前階段。				Yes
target	返回觸發此事件的元素（事件的目標節點）。	No	1	9	Yes
timeStamp	返回事件產生的日期和時間。	No	1	9	Yes
type	返回當前 Event 對象表示的事件的名稱。	6	1	9	Yes

標準 Event 方法

下面列出了 2 級 DOM 事件標準定義的方法。IE 的事件模型不支援這些方法：

方法	描述	IE	F	O	W3C
initEvent()	初始化新建立的 Event 對象的屬性。	No	1	9	Yes
preventDefault()	通知瀏覽器不要執行與事件關聯的預設動作。	No	1	9	Yes
stopPropagation()	終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理常式將被調用，事件不再被指派到其他節點。	No	1	9	Yes

 新增:2008-9-25： event.srcElement  應用：    event.srcElement.tagName可以捕獲主動標記名稱。
    注意擷取的標記都以大寫表示，如"TD","TR","A"等。Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <script type="text/javascript">
    function tdclick(){
        if(event.srcElement.tagName.toLowerCase()=='td')
            alert("行："+(event.srcElement.parentNode.rowIndex+1)+"列："+(event.srcElement.cellIndex+1));
    }
  </script>
</head>
<body>
<table align="center" onclick="tdclick()" width="100%" height="400" cellspacing="1" border="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#C0C0C0" bgcolor="#C0C0C0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>：