快捷導(dǎo)航

JavaScript常用事件介紹

更新時(shí)間：2019年01月21日 14:51:03 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于JavaScript常用事件介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧

JavaScript 事件（常用）

網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說(shuō)，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè)onClick 事件來(lái)觸發(fā)某個(gè)函數(shù)。事件在HTML 頁(yè)面中定義。

事件舉例：

鼠標(biāo)點(diǎn)擊
頁(yè)面或圖像載入
鼠標(biāo)懸浮于頁(yè)面的某個(gè)熱點(diǎn)之上
在表單中選取輸入框
確認(rèn)表單
鍵盤按鍵

注意：事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時(shí)函數(shù)才會(huì)執(zhí)行。

事件三要素

事件源、事件、事件驅(qū)動(dòng)程序。

三句話：獲取事件源、綁定事件、書寫事件驅(qū)動(dòng)程序。

1.獲取事件源：document.getElementById(“box”);
2.綁定事件： box.onclick = function(){ 程序 };
3.書寫事件驅(qū)動(dòng)程序：以后要學(xué)習(xí)的關(guān)于DOM的操作

行內(nèi)綁定事件：

onload事件用于body標(biāo)簽控制整個(gè)頁(yè)面（主要用于頁(yè)面一加載就觸發(fā)）

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

onload 頁(yè)面或圖片加載完成時(shí)
onunload 用戶離開頁(yè)面時(shí)

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

onchange 框內(nèi)容改變時(shí)
onsubmit 點(diǎn)擊提交按鈕時(shí)
onreset 重新點(diǎn)擊鼠標(biāo)按鍵時(shí)
onselect 文本被選擇時(shí)
onblur 元素失去焦點(diǎn)時(shí)
onfocus 當(dāng)元素獲取焦點(diǎn)時(shí)

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

onkeydown 按下鍵盤按鍵時(shí)
onkeypress 按下或按住鍵盤按鍵時(shí)
onkeyup 放開鍵盤按鍵時(shí)

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

onclick 鼠標(biāo)點(diǎn)擊一個(gè)對(duì)象時(shí)
ondblclick 鼠標(biāo)雙擊一個(gè)對(duì)象時(shí)
onmousedown 鼠標(biāo)被按下時(shí)
onmousemove 鼠標(biāo)被移動(dòng)時(shí)
onmouseout 鼠標(biāo)離開元素時(shí)
onmouseover 鼠標(biāo)經(jīng)過(guò)元素時(shí)
onmouseup 釋放鼠標(biāo)按鍵時(shí)

e.其他

onresize 當(dāng)窗口或框架被重新定義尺寸時(shí)
onabort 圖片下載被打斷時(shí)
onerror 當(dāng)加載文檔或圖片時(shí)發(fā)生錯(cuò)誤時(shí)

自定義對(duì)象:有初始化對(duì)象和定義構(gòu)造函數(shù)的對(duì)象兩種方法

a：初始化對(duì)象

例如：對(duì)象={屬性1:值1;屬性2:值2;......屬性n:值n} 注意:每個(gè)屬性/值對(duì)之間用分號(hào)隔開；

b：定義構(gòu)造函數(shù)的對(duì)象

例如:

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

注意：方法名和函數(shù)名可以同名,但是在方法調(diào)用函數(shù)前,函數(shù)必須已經(jīng)定義好,否則會(huì)出錯(cuò)為自定義的函數(shù)創(chuàng)建新的實(shí)例一樣是使用new語(yǔ)句。

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

該事件在 <input> 或 <textarea> 元素的值發(fā)生改變時(shí)觸發(fā)。

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

如有不足請(qǐng)多多指教！希望給您帶來(lái)幫助！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章: