JavaScript的事件監聽你瞭解嗎

Posted on by

1. 什麼是事件監聽 ？

事件監聽就是計算機對事件進行監聽，知道什麼時候發生瞭這個事件，從而執行一些寫好的程序。

那麼，它的常用方法有哪些呢 ？讓我們一起來看看吧 ！

2. DOM0 級事件監聽

DOM0 級事件監聽：

給元素設置它們的onxxx屬性（e.g., onclick）

對於 DOM0 級事件監聽 ，它隻能監聽冒泡階段

2.1) 常見的頁面事件監聽

事件名 事件描述
onload 當頁面或圖像被完成加載
onunload 當用戶退出頁面

2.2) 常見的鼠標事件監聽

事件名 事件描述
onclick 當鼠標單擊某個元素
ondblclick 當鼠標雙擊某個元素
onmousedown 當鼠標按鍵在某個元素上按下
onmouseup 當鼠標按鍵在某個元素上松開
onmousemove 當鼠標按鍵在某個元素上移動
onmouseenter 當鼠標移動到某個元素上
（進入到某個元素區域時）
onmouseleave 當鼠標離開某個元素

其中onmouseenter與onmouseover類似，onmouseleave與onmouseout類似；

它們兩者的區別：onmouseenter與onmouseleave事件不支持冒泡，另外兩個支持事件冒泡；

所以，onmouseenter與onmouseleave搭配使用，onmouseover與onmouseout搭配使用

2.3) 常見的鍵盤事件監聽

事件名 事件描述
onkeypress 當鍵盤上的某個按鍵被按下
（系統按鍵無法識別 e.g.，F1 這類的按鍵）
onkeydown 當鍵盤上的某個按鍵被按下
（系統按鍵可以識別，並且先於onkeypress發生）
onkeyup 當鍵盤上的某個按鍵被松開

2.4) 常見的表單事件監聽

事件名 事件描述
oninput 當用於正在修改表單域的內容
onchange 當用戶改變瞭表單域的內容
onfocus 當元素獲得焦點
（e.g.，tab鍵或鼠標點擊）
onblur 當元素失去焦點
onsubmit 當表單被提交
onreset 當表單被重置

3. DOM2 級事件監聽

DOM2 級事件監聽：

EventTarget.addEventListener()方法將指定的監聽器註冊到EventTarget上，當該對象觸發指定的事件時，指定的回調函數就會被執行。

它有著幾種寫法，想瞭解別的寫法可以看看 MDN 官方文檔，這裡介紹的寫法如下：

  • type：表示監聽事件類型的字符串
  • listener：事件監聽函數
  • useCapture：當寫true時，進行的是事件捕獲階段，默認為false，事件冒泡階段
EventTarget.addEventListener(type, listener, useCapture);

對於常用的type：即把常用的 DOM0 級的onxxx的on去掉後就可以瞭，即原來的事件名。

例如：

target.addEventListener('click', () => {
	console.log("我被點擊瞭");
});
// 這裡第三個參數沒寫，默認監聽冒泡階段，如果要監聽捕獲階段，寫上 true

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!     

推薦閱讀：