首頁 > web前端 > js教程 > event物件及各種事件總結

event物件及各種事件總結

零下一度
發布: 2018-05-24 10:00:06
原創
1960 人瀏覽過

事件(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:當使用者選擇文字方塊(inputtextarea)中的一個或多個字元觸發。

input.onselect = function () {
  alert('Lee');
};
登入後複製

change:當文字方塊(inputtextarea)內容改變且失去焦點後觸發。

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板