今天我們來探討一下JavaScript中如何監聽網頁事件。在Web開發中，網頁事件的發生是非常常見的情況，比如點擊按鈕、鼠標滾動、鍵盤輸入等等。通過JavaScript監聽這些事件可以讓網頁更加交互性和動態化。
概述一下，JavaScript中監聽網頁事件主要分為兩種方式：事件處理程序和事件偵聽器。事件處理程序是直接在HTML標簽上定義的屬性，而事件偵聽器是在JavaScript中定義的函數，通過一些方法把它綁定到HTML標簽上。
下面我們通過舉例來更好地理解這兩種方式。
1. 事件處理程序
在HTML標簽上定義事件處理程序可以讓我們直接在標簽中寫JavaScript代碼來處理事件。比如，我們有一個按鈕：這個按鈕上定義了一個onclick屬性，屬性的值是一個JavaScript函數，當點擊這個按鈕時，就會執行這個函數中的代碼，這里是一個彈出窗口。
事件處理程序的優點是代碼簡單易懂，適合一些簡單的操作。但是當我們需要在多個標簽上綁定同一個事件處理程序時，就會顯得不太優雅。
2. 事件偵聽器
在JavaScript中，我們可以使用addEventListener()函數來添加事件偵聽器，這個函數接受三個參數：事件類型、事件處理函數和一個布爾值。例如：
window.addEventListener('scroll', function() {
console.log('網頁滾動了');
})這個例子中，我們給整個窗口對象添加了一個scroll事件偵聽器，每當窗口發生滾動時，就會在控制臺輸出“網頁滾動了”。
事件偵聽器的優點是可以在一個函數中處理多個標簽的事件，代碼更加靈活和可讀性強。缺點是需要在JavaScript中定義函數，分離了HTML和JavaScript的代碼。
除了scroll事件，我們還可以監聽很多其他的事件，例如click、mousemove、keydown等等。在這里不再一一列舉。
3. 事件委托
在處理復雜的網頁結構時，為每個子元素都添加事件偵聽器會顯得比較麻煩。這時候可以采用事件委托的方式，即把事件綁定到子元素的父元素上，通過事件流的傳播機制，在父元素上處理子元素發生的事件。
例如，我們有一個ul列表，需要在每個li元素上添加click事件：- 列表1
- 列表2
- 列表3