簡單聊聊JavaScript中的事件監聽
2022-06-23 14:01:07
【相關推薦：、】
什麼是「事件監聽」
DOM允許我們書寫JS程式碼，來讓HTML元素對事件作出反應；
事件：使用者與網頁的互動動作；eg：點選網頁；
監聽：是為了讓計算機隨時能夠發現這個事件發生了，從而執行程式設計師預先編寫的一些程式；
設定事件監聽的方法主要有onxxx和addEventListener()兩種；
最簡單的設定事件監聽的方法
設定它們的onxxx屬性；
oBox.onclick = function () {
// 點選盒子時，將執行這裡的語句
}常見的滑鼠事件監聽
| 事件名 | 事件描述 |
|---|---|
| onclick | 當滑鼠單機某個物件 |
| ondblclick | 當滑鼠雙擊某個物件 |
| onmousedown | 當某個滑鼠按鍵在某個物件上被按下 |
| onmouseup | 當某個滑鼠按鍵在某個物件上被鬆開 |
| onmousemove | 當某個滑鼠按鍵在某個物件上被移動 |
| onmouseenter | 當滑鼠進入某個物件（相似事件onmouseover） |
| onmouseleave | 當滑鼠離開某個物件（相似事件onmouseout） |
常見的鍵盤事件監聽
| 事件名 | 事件描述 |
|---|---|
| onkeypress | 當某個鍵盤的鍵被按下（系統按鈕，如箭頭鍵和功能鍵無法得到識別） |
| onkeydown | 當某個鍵盤的鍵被按下（系統按鈕可以識別，並且會先於onkeypress發生） |
| onkeyup | 當某個鍵盤的鍵被鬆開 |
常見的表單事件監聽
| 事件名 | 事件描述 |
|---|---|
onchange | 當使用者改變某個表單域的內容時，會觸發 |
| onfocus | 當某元素獲得焦點（比如tab鍵或滑鼠點選） |
| onblur | 當某元素失去焦點 |
| onsubmit | 當表單被提交 |
| onreset | 當表單被重置 |
常見的頁面事件監聽
| 事件名 | 事件描述 |
|---|---|
| onload | 當頁面或影象被完成載入 |
| onunload | 當使用者退出頁面 |
事件的傳播
先從外到內（捕獲階段），然後再從內到外（冒泡階段）
而，onxxx這樣的寫法（DOM0級），只能監聽冒泡階段；所以需要用到addEventListener()方法（DOM2級）；
oBox1.addEventListener('click', function(){
// 這是事件處理常式
}, true) // true表示監聽捕獲階段，false表示監聽冒泡階段注意事項
- 最內部的元素不再區分捕獲和冒泡階段，會先執行寫在前面的監聽，然後執行後寫的監聽；
- 如果給元素設定相同的兩個或多個同名事件，則DOM0級寫法後面寫的會覆蓋先寫的；而DOM2級會按順序執行；
【相關推薦：、】
以上就是簡單聊聊JavaScript中的事件監聽的詳細內容，更多請關注TW511.COM其它相關文章！