這篇文章主要介紹了JavaScript的事件監聽實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript的事件監聽實例分析文章都會有所收獲，下面我們一起來看看吧。
事件監聽就是計算機對事件進行監聽，知道什么時候發生了這個事件，從而執行一些寫好的程序。
那么，它的常用方法有哪些呢 ？讓我們一起來看看吧 ！
DOM0 級事件監聽：
給元素設置它們的onxxx屬性（e.g., onclick）
對于 DOM0 級事件監聽 ，它只能監聽冒泡階段
| 事件名 | 事件描述 |
|---|---|
| onload | 當頁面或圖像被完成加載 |
| onunload | 當用戶退出頁面 |
| 事件名 | 事件描述 |
|---|---|
| onclick | 當鼠標單擊某個元素 |
| ondblclick | 當鼠標雙擊某個元素 |
| onmousedown | 當鼠標按鍵在某個元素上按下 |
| onmouseup | 當鼠標按鍵在某個元素上松開 |
| onmousemove | 當鼠標按鍵在某個元素上移動 |
| onmouseenter | 當鼠標移動到某個元素上 （進入到某個元素區域時） |
| onmouseleave | 當鼠標離開某個元素 |
其中onmouseenter與onmouseover類似，onmouseleave與onmouseout類似；
它們兩者的區別：onmouseenter與onmouseleave事件不支持冒泡，另外兩個支持事件冒泡；
所以，onmouseenter與onmouseleave搭配使用，onmouseover與onmouseout搭配使用
| 事件名 | 事件描述 |
|---|---|
| onkeypress | 當鍵盤上的某個按鍵被按下 （系統按鍵無法識別 e.g.，F1 這類的按鍵） |
| onkeydown | 當鍵盤上的某個按鍵被按下 （系統按鍵可以識別，并且先于 onkeypress發生） |
| onkeyup | 當鍵盤上的某個按鍵被松開 |
| 事件名 | 事件描述 |
|---|---|
| oninput | 當用于正在修改表單域的內容 |
| onchange | 當用戶改變了表單域的內容 |
| onfocus | 當元素獲得焦點 （e.g.， tab鍵或鼠標點擊） |
| onblur | 當元素失去焦點 |
| onsubmit | 當表單被提交 |
| onreset | 當表單被重置 |
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
關于“JavaScript的事件監聽實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript的事件監聽實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
