JavaScript常用事件介紹

JavaScript 事件（常用）

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在用戶點擊某按鈕時產生一個onClick 事件來觸發某個函數。事件在HTML 頁面中定義。

事件舉例：

• 鼠標點擊
• 頁面或圖像載入
• 鼠標懸浮于頁面的某個熱點之上
• 在表單中選取輸入框
• 確認表單
• 鍵盤按鍵
  

注意：事件通常與函數配合使用，當事件發生時函數才會執行。

事件三要素

事件源、事件、事件驅動程序。

三句話：獲取事件源、綁定事件、書寫事件驅動程序。

• 1.獲取事件源：document.getElementById(“box”);
• 2.綁定事件：  box.onclick = function(){ 程序 };
• 3.書寫事件驅動程序：以后要學習的關于DOM的操作

行內綁定事件：

onload事件用于body標簽控制整個頁面（主要用于頁面一加載就觸發）

a.窗口事件,只在body和frameset元素中才有效

•     onload      頁面或圖片加載完成時
•     onunload     用戶離開頁面時

b.表單元素事件,在表單元素中才有效

•     onchange     框內容改變時
•     onsubmit     點擊提交按鈕時
•     onreset     重新點擊鼠標按鍵時
•     onselect     文本被選擇時
•     onblur      元素失去焦點時
•     onfocus     當元素獲取焦點時

c.鍵盤事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都無效

•     onkeydown    按下鍵盤按鍵時
•     onkeypress    按下或按住鍵盤按鍵時
•     onkeyup     放開鍵盤按鍵時

d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都無效

•     onclick     鼠標點擊一個對象時
•     ondblclick    鼠標雙擊一個對象時
•     onmousedown 鼠標被按下時
•     onmousemove 鼠標被移動時
•     onmouseout    鼠標離開元素時
•     onmouseover 鼠標經過元素時
•     onmouseup    釋放鼠標按鍵時

e.其他

•     onresize     當窗口或框架被重新定義尺寸時
•     onabort     圖片下載被打斷時
•     onerror     當加載文檔或圖片時發生錯誤時

自定義對象:有初始化對象和定義構造函數的對象兩種方法

a：初始化對象

例如：對象={屬性1:值1;屬性2:值2;......屬性n:值n} 注意:每個屬性/值對之間用分號隔開；

b： 定義構造函數的對象

例如:

function 函數名(屬性1, 屬性2,......屬性N){
this.屬性1=屬性值1;
this.屬性2=屬性值2;
this.屬性n=屬性值n;
this.方法名1=函數名1;
this.方法名2=函數名2;
}

注意：方法名和函數名可以同名,但是在方法調用函數前,函數必須已經定義好,否則會出錯為自定義的函數創建新的實例一樣是使用new語句。

• onfocus/onblur 聚焦離焦事件表單校驗比較合適
• 0nclick/ondblclick 鼠標單擊或雙擊事件
• Onkeydown/onkeypress 搜索引擎使用較多（鍵盤某個鍵被按下或按住）
• Onload 頁面加載事件（整個頁面js、css等），所有的其它操作（匿名方式）都可以放到這個綁定函數里面去
• Onmouseover/onmouseout/onmousemove 購物網站商品詳細信息
• Onsubmit 表單提交事件，有返回值，控制表單是否提交。onsubmit="return 函數名()"
• Onreset 重置按鈕被點擊
• Onchange 當用戶改變內容的時候使用這個事件（二級聯動）
• oninput 當表單值發生改變時觸發事件（h6新樣式）

該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。

提示： 該事件類似于onchange 事件。不同之處在于 oninput 事件在元素值發生變化是立即觸發，onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

如有不足請多多指教！希望給您帶來幫助！

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。如果你想了解更多相關內容請查看下面相關鏈接