簡單聊聊JavaScript中的事件監聽

本篇文章為大家帶來了關於javascript的相關知識，其中主要整理了事件監聽的相關問題，包括了什麼是事件監聽、設定事件監聽的方法等等內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

什麼是「事件監聽」

DOM允許我們書寫JS程式碼，讓HTML元素對事件做出反應；

事件：使用者與網頁的互動動作；eg ：點擊網頁；

監聽：是為了讓電腦隨時能夠發現這個事件發生了，從而執行程式設計師預先編寫的一些程式；

設定事件監聽的方法主要有onxxx和addEventListener()兩種;

#最簡單的設定事件監聽的方法

設定它們的onxxx屬性；

oBox.onclick = function () {
    // 点击盒子时，将执行这里的语句
}

常見的滑鼠事件監聽

##onclick當滑鼠單機某個物件#ondblclick當滑鼠雙擊某個物件onmousedown當某個滑鼠按鍵在某個物件上被按下onmouseup當某個滑鼠按鍵在某個物件上被放開onmousemove當某個滑鼠按鍵在某個物件上被移動onmouseenter當滑鼠進入某個物件（相似事件onmouseover）onmouseleave當滑鼠離開某個物件（相似事件onmouseout）

#事件名稱	事件描述

常見的鍵盤事件監聽

事件名稱事件描述onkeypress當某個鍵盤的按鍵被按下（系統按鈕，如箭頭鍵和功能鍵無法被辨識）onkeydown當某個鍵盤的鍵被按下（系統按鈕可以識別，並且會先於onkeypress發生）onkeyup 當某個鍵盤的鍵被放開常見的表單事件監聽

#事件名稱事件描述當使用者改變某個表單域的內容時，會觸發onfocus當某元素獲得焦點（例如tab鍵或滑鼠點擊）onblur當某元素失去焦點onsubmit#當表單被提交onreset當表單被重置

onchange

常見的頁面事件監聽

事件名稱事件描述onload當頁面或圖像被完成載入onunload當使用者退出頁面事件的傳播

#先從外到內（捕獲階段），然後再從內到外（冒泡階段）

#而，onxxx這樣的寫法（DOM0級），只能監聽冒泡階段；所以需要用到addEventListener()方法（DOM2級）；

oBox1.addEventListener('click', function(){
    // 这是事件处理函数
}, true)  // true表示监听捕获阶段，false表示监听冒泡阶段

注意事項

######最######內部的元素不再區分捕獲和冒泡階段#######，會先執行寫在前面的監聽，然後執行後寫的監聽；# ###########如果為元素設定相同的兩個或多個同名事件，則DOM0級寫法######後面寫的會覆寫先寫的；而DOM2級會依序執行######;############【相關推薦：###javascript影片教學###、###web前端###】####

以上是簡單聊聊JavaScript中的事件監聽的詳細內容。更多資訊請關注PHP中文網其他相關文章！