Javascript防冒泡事件與Event對象

防冒泡用到的就是event的屬性和方法

案例一，滑鼠點選判斷

案例二，光标坐标

案例三，螢幕坐标

案例四，事件類型

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

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

屬性

此事件發生在何時...

<a href="http://www.w3school.com.cn/jsref/event_onabort.asp">onabort</a>

圖像的加載被中斷。

<a href="http://www.w3school.com.cn/jsref/event_onblur.asp">onblur</a>

元素失去焦點。

<a href="http://www.w3school.com.cn/jsref/event_onchange.asp">onchange</a>

域的内容被改變。

<a href="http://www.w3school.com.cn/jsref/event_onclick.asp">onclick</a>

當使用者點選某個對象時調用的事件句柄。

<a href="http://www.w3school.com.cn/jsref/event_ondblclick.asp">ondblclick</a>

當使用者輕按兩下某個對象時調用的事件句柄。

<a href="http://www.w3school.com.cn/jsref/event_onerror.asp">onerror</a>

在加載文檔或圖像時發生錯誤。

<a href="http://www.w3school.com.cn/jsref/event_onfocus.asp">onfocus</a>

元素獲得焦點。

<a href="http://www.w3school.com.cn/jsref/event_onkeydown.asp">onkeydown</a>

某個鍵盤按鍵被按下。

<a href="http://www.w3school.com.cn/jsref/event_onkeypress.asp">onkeypress</a>

某個鍵盤按鍵被按下并松開。

<a href="http://www.w3school.com.cn/jsref/event_onkeyup.asp">onkeyup</a>

某個鍵盤按鍵被松開。

<a href="http://www.w3school.com.cn/jsref/event_onload.asp">onload</a>

一張頁面或一幅圖像完成加載。

<a href="http://www.w3school.com.cn/jsref/event_onmousedown.asp">onmousedown</a>

滑鼠按鈕被按下。

<a href="http://www.w3school.com.cn/jsref/event_onmousemove.asp">onmousemove</a>

滑鼠被移動。

<a href="http://www.w3school.com.cn/jsref/event_onmouseout.asp">onmouseout</a>

滑鼠從某元素移開。

<a href="http://www.w3school.com.cn/jsref/event_onmouseover.asp">onmouseover</a>

滑鼠移到某元素之上。

<a href="http://www.w3school.com.cn/jsref/event_onmouseup.asp">onmouseup</a>

滑鼠按鍵被松開。

<a href="http://www.w3school.com.cn/jsref/event_onreset.asp">onreset</a>

重置按鈕被點選。

<a href="http://www.w3school.com.cn/jsref/event_onresize.asp">onresize</a>

視窗或架構被重新調整大小。

<a href="http://www.w3school.com.cn/jsref/event_onselect.asp">onselect</a>

文本被選中。

<a href="http://www.w3school.com.cn/jsref/event_onsubmit.asp">onsubmit</a>

确認按鈕被點選。

<a href="http://www.w3school.com.cn/jsref/event_onunload.asp">onunload</a>

使用者退出頁面。

描述

<a href="http://www.w3school.com.cn/jsref/event_altkey.asp">altKey</a>

傳回當事件被觸發時，"ALT" 是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_button.asp">button</a>

傳回當事件被觸發時，哪個滑鼠按鈕被點選。

<a href="http://www.w3school.com.cn/jsref/event_clientx.asp">clientX</a>

傳回當事件被觸發時，滑鼠指針的水準坐标。

<a href="http://www.w3school.com.cn/jsref/event_clienty.asp">clientY</a>

傳回當事件被觸發時，滑鼠指針的垂直坐标。

<a href="http://www.w3school.com.cn/jsref/event_ctrlkey.asp">ctrlKey</a>

傳回當事件被觸發時，"CTRL" 鍵是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_metakey.asp">metaKey</a>

傳回當事件被觸發時，"meta" 鍵是否被按下。

<a href="http://www.w3school.com.cn/jsref/event_relatedtarget.asp">relatedTarget</a>

傳回與事件的目标節點相關的節點。

<a href="http://www.w3school.com.cn/jsref/event_screenx.asp">screenX</a>

傳回當某個事件被觸發時，滑鼠指針的水準坐标。

<a href="http://www.w3school.com.cn/jsref/event_screeny.asp">screenY</a>

傳回當某個事件被觸發時，滑鼠指針的垂直坐标。

<a href="http://www.w3school.com.cn/jsref/event_shiftkey.asp">shiftKey</a>

傳回當事件被觸發時，"SHIFT" 鍵是否被按下。

除了上面的滑鼠/事件屬性，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動态定位的最内層包容元素。

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

<a href="http://www.w3school.com.cn/jsref/event_bubbles.asp">bubbles</a>

傳回布爾值，訓示事件是否是起泡事件類型。

<a href="http://www.w3school.com.cn/jsref/event_cancelable.asp">cancelable</a>

傳回布爾值，訓示事件是否可擁可取消的預設動作。

<a href="http://www.w3school.com.cn/jsref/event_currenttarget.asp">currentTarget</a>

傳回其事件監聽器觸發該事件的元素。

<a href="http://www.w3school.com.cn/jsref/event_eventphase.asp">eventPhase</a>

傳回事件傳播的目前階段。

<a href="http://www.w3school.com.cn/jsref/event_target.asp">target</a>

傳回觸發此事件的元素（事件的目标節點）。

<a href="http://www.w3school.com.cn/jsref/event_timestamp.asp">timeStamp</a>

傳回事件生成的日期和時間。

<a href="http://www.w3school.com.cn/jsref/event_type.asp">type</a>

傳回目前 Event 對象表示的事件的名稱。

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

方法

<a href="http://www.w3school.com.cn/jsref/event_initevent.asp">initEvent()</a>

初始化新建立的 Event 對象的屬性。

<a href="http://www.w3school.com.cn/jsref/event_preventdefault.asp">preventDefault()</a>

通知浏覽器不要執行與事件關聯的預設動作。

<a href="http://www.w3school.com.cn/jsref/event_stoppropagation.asp">stopPropagation()</a>

不再派發事件。

本文轉自TBHacker部落格園部落格，原文連結：http://www.cnblogs.com/jiqing9006/p/5999844.html，如需轉載請自行聯系原作者