JavaScript 頁面事件監聽

JavaScript 是一門強大的編程語言，可以很好地為網頁添加交互功能。在網頁中，我們常常需要實現對某些事件的監聽，例如用戶點擊按鈕、鼠標移動、滾動等等。這些事件的監聽可以通過 JavaScript 實現。

對于一個按鈕點擊事件，我們可以這樣實現：

<code>const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Button Clicked!')
});</code>

這段代碼中，我們首先使用 document.querySelector() 操作獲取到網頁中的按鈕元素，并將其賦值給常量 button。然后我們調用 button 的 addEventListener() 方法，在其中傳入我們要監聽的事件類型 'click' 和一個回調函數。當按鈕被點擊時，該回調函數將會被執行。

類似地，我們還可以監聽其他類型的事件。

鼠標移動事件：

<code>const element = document.querySelector('.element');
element.addEventListener('mousemove', (event) => {
console.log('Mouse move at: ', event.clientX, event.clientY);
});</code>

滾動事件：

<code>const window = document.querySelector('.window');
window.addEventListener('scroll', () => {
console.log('Window scrolled!');
});</code>

在以上代碼中，我們分別監聽了一個具有類名為 .element 的元素的鼠標移動事件和一個 window 窗口的滾動事件。在鼠標移動事件的回調函數中，我們通過 event 參數獲取到了鼠標的位置信息。

除了 addEventListener() 方法外，我們還可以使用其他的監聽方法。例如，我們可以通過設置元素的 onclick 屬性來監聽鼠標點擊事件：

<code>const button = document.querySelector('button');
button.onclick = () => {
alert('Button Clicked!')
};</code>

不過需要注意的是，當一個元素同時設置了 addEventListener() 和 onclick 屬性時，addEventListener() 方法會優先于 onclick 屬性執行。

綜上所述，JavaScript 頁面事件監聽是實現網頁交互動態的核心之一。掌握好這一技能，能夠幫助我們實現更加強大的網頁效果。