教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

JavaScript中常用事件有哪些?

更新時(shí)間:2022年02月17日18時(shí)01分 來源:黑馬程序員 瀏覽次數(shù):

JavaScript是基于對(duì)象的腳本語(yǔ)言,它的一個(gè)最基本的特征就是采用事件鼎動(dòng)。如,當(dāng)鼠標(biāo)指針經(jīng)過某個(gè)按鈕或者用戶在文本框中輸入某些信息時(shí),都可以設(shè)置相應(yīng)的JavaScript事件來完成某些特殊效果。下面,將對(duì)JavaScript中的常用事件進(jìn)行詳細(xì)講解。

1.鼠標(biāo)事件

鼠標(biāo)事件是指通過鼠標(biāo)動(dòng)作觸發(fā)的事件,鼠標(biāo)事件有很多,下面列舉幾個(gè)常用的鼠標(biāo)事件,如表所示。

類別 事件 事件說明
鼠標(biāo)事件 onclick 鼠標(biāo)單擊時(shí)觸發(fā)此事件
ondblclick 鼠標(biāo)雙擊時(shí)觸發(fā)此事件
onmousedown 鼠標(biāo)按下時(shí)觸發(fā)此事件
onmouseup 鼠標(biāo)彈起時(shí)觸發(fā)的事件
onmouseover 鼠標(biāo)移動(dòng)到某個(gè)設(shè)置了此事件的元素上時(shí)觸發(fā)此事件
onmousemove 鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件
onmouseout 鼠標(biāo)從某個(gè)設(shè)置了此事件的元素上離開時(shí)觸發(fā)此事件

2.鍵盤事件

鍵盤事件是指用戶在使用鍵盤時(shí)觸發(fā)的事件。例如,用戶按【Esc】鍵關(guān)閉打開的狀態(tài)欄,按【Enter】鍵直接完成光標(biāo)的上下切換等。下面列舉幾個(gè)常用的鍵盤事件,如表15-16所示。

表15-16 JavaScript中常用的鍵盤事件

類別 事件 事件說明
鍵盤事件 onkeydown 當(dāng)鍵盤上的某個(gè)按鍵被按下時(shí)觸發(fā)此事件
onkeyup 當(dāng)鍵盤上的某個(gè)按鍵被按下后彈起時(shí)觸發(fā)此事件
onkeypress 當(dāng)輸入有效的字符按鍵時(shí)觸發(fā)此事件

3.表單事件

表單事件是指對(duì)Web表單操作時(shí)發(fā)生的事件。例如,表單提交前對(duì)表單的驗(yàn)證,表單重置時(shí)的確認(rèn)操作等。下面列舉幾個(gè)常用的表單事件,如表15-17所示。

表15-17 JavaScript中常用的表單事件

類別 事件 事件說明

表單事件

onblur 當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)此事件
onchange 當(dāng)前元素失去焦點(diǎn)并且元素內(nèi)容發(fā)生改變時(shí)觸發(fā)此事件
onfocus 當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)此事件
onreset 當(dāng)表單被重置時(shí)觸發(fā)此事件
onsubmit 當(dāng)表單被提交時(shí)觸發(fā)此事件

4.頁(yè)面事件

在項(xiàng)目開發(fā)中,經(jīng)常需要JavaScript對(duì)網(wǎng)頁(yè)中的DOM元素進(jìn)行操作,而頁(yè)面的加載又是按照代碼的編寫順序,從上到下依次執(zhí)行的。因此,若在頁(yè)面還未加載完成的情況下,就使用JavaScript操作DOM元素,會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤,例如下面的示例代碼:

<script>
 document.getElementById('demo').onclick=function () {
    alert('單擊');
  }
</script>
<button ide="demo">單擊顯示彈框</button>

在上述代碼中,第2行代碼利用getElementByldO獲取id為demo的元素,并為其添加擊”彈框;第6行代碼定義了一個(gè)用于單擊的按鈕。當(dāng)用戶單擊按鈕時(shí),頁(yè)面就會(huì)彈出一個(gè)提示框。





猜你喜歡:

JavaScript中null與undefind的區(qū)別有哪些?

JS編譯原理:Javascript代碼編譯步驟有哪些?

JS變量教程:JavaScript中變量的用法詳解

JavaScript怎樣實(shí)現(xiàn)定時(shí)器功能?

傳智教育HTML&JS+前端開發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!