(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:當使用者點擊提交按鈕在元素上觸發。
form.onsubmit = function () { alert('Lee'); };
reset:当用户点击重置按钮在元素上触发。
form.onreset= function () { alert('Lee'); };
resize:当窗口或框架的大小变化时在window或框架上触发。
window.onresize = function () { alert('Lee'); };
scroll:当用户滚动带滚动条的元素时触发。
window.onscroll = function () { alert('Lee'); };
以上是event物件及各種事件總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!