event物件及各種事件總結

事件（event）

event物件

(1)什麼是event物件？

　　Event 物件代表事件的狀態，例如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。事件通常與函數結合使用，函數不會在事件發生前被執行！

(2)Event相關方法與屬性

　　1、Googleevent.stopPropagation()、IE event.CancelBubble=true：終止事件在傳播過程的擷取、目標處理或起泡階段進一步傳播。呼叫該方法後，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點

　　2、Googleevent.preventDefault()、IE event.returnvalue=false ：取消事件的預設動作(a標籤的href)。

　　3、event.clientX、event.clientY：滑鼠相對於瀏覽器視窗視覺區域的X，Y座標（視窗座標），視覺區域不包含工具列和捲軸。 IE事件和標準事件都定義了這2個屬性

　　4、event.offsetX、event.offsetY:滑鼠相對於事件來源元素（觸發事件的元素）的X,Y座標，只有IE事件有這2個屬性，標準事件沒有對應的屬性。 與event.offsetLeft、event.offsettop一樣。

　　5、event.screenX、event.screenY：滑鼠相對於使用者顯示器螢幕左上角的X,Y座標。標準事件和IE事件都定義了這2個屬性。

　　6、event.keyCode：取得按鍵的code值。例：我們在程式裡是怎麼知道我們是按得哪個鍵呢，我們可以透過keyCode取得，程式設計師早在一開始就把鍵盤上的每一個鍵定義了一個code，在程式裡我們可以判斷值來知道我們點擊了哪個鍵。

1.滑鼠事件，頁面所有元素都可觸發

click：當使用者點擊滑鼠按鈕或按下回車鍵時觸發。

input.onclick = function () {
　　alert('Lee');
};

dblclick：當使用者雙擊主滑鼠按鈕時觸發。

input.ondblclick = function () {
　　alert('Lee');
};

mousedown：當使用者按下了滑鼠還未彈起時觸發。

input.onmousedown = function () {
　　alert('Lee');
};

mouseup：當使用者釋放滑鼠按鈕時觸發。

input.onmouseup = function () {
　　alert('Lee');
};

mouseover（mouseenter 這種方法不會冒泡）：當滑鼠移到某個元素上方時觸發。

input.onmouseover = function () {
　　alert('Lee');
};

mouseout（mouseleaver 這種方法不會冒泡）：當滑鼠移出某個元素上方時觸發。

input.onmouseout = function () {
　　alert('Lee');
};

mousemove：當滑鼠指標在元素上移動時觸發。

input.onmousemove = function () {
　　alert('Lee');
};

2.鍵盤事件

keydown：當使用者按下鍵盤上任意鍵觸發，如果按住不放，會重複觸發。

onkeydown = function () {
　　alert('Lee');
};

keypress：當使用者按下鍵盤上的字元鍵觸發，如果按住不放，會重複觸發。

onkeypress = function () {
　　alert('Lee');
};

keyup：當使用者釋放鍵盤上的鍵觸發。

onkeyup = function () {
　　alert('Lee');
};

3.HTML事件

load：當頁面完全載入後在window上面觸發，或當框架集載入完畢後在框架集上觸發。

window.onload = function () {
　　alert('Lee');
};

 

unload：當頁面完全卸載後在window上面觸發，或當框架集卸載後在框架集上觸發。

window.onunload = function () {
　　alert('Lee');
};

select：當使用者選擇文字方塊(input或textarea)中的一個或多個字元觸發。

input.onselect = function () {
　　alert('Lee');
};

change：當文字方塊(input或textarea)內容改變且失去焦點後觸發。

input.onchange = function () {
　　alert('Lee');
};

focus：當頁面或元素獲得焦點時在window及相關元素上面觸發。

input.onfocus = function () {
　　alert('Lee');
};

blur：當頁面或元素失去焦點時在window及相關元素上觸發。

input.onblur = function () {
　　alert('Lee');
};

submit：當使用者點擊提交按鈕在ff9c23ada1bcecdd1a0fb5d5a0f18437元素上觸發。

form.onsubmit = function () {
　　alert('Lee');
};

reset：当用户点击重置按钮在ff9c23ada1bcecdd1a0fb5d5a0f18437元素上触发。

form.onreset= function () {
　　alert('Lee');
};

resize：当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {
　　alert('Lee');
};

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll = function () {
　　alert('Lee');
};

以上是event物件及各種事件總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！