JavaScript Event 菜鳥入門指南

JavaScript 作為一門廣泛應用于網頁前端的編程語言，其事件處理機制是其核心特點之一。事件指的是網頁中用來響應用戶操作或者其他功能需要的操作，類似于鼠標點擊、鍵盤敲擊、頁面加載等等。本文將從基礎概念入手，介紹 JavaScript 中的事件處理機制。

事件的基本概念

// HTML 代碼
<button id="btn">點擊我</button>
// JavaScript 代碼
document.getElementById('btn').addEventListener('click', function () {
alert('點擊了按鈕');
});

在上面的例子中，HTML 中有一個按鈕元素，通過 JavaScript 的getElementById方法獲取到該元素，使用addEventListener方法為其添加了一個點擊事件監聽器（listener），在監聽器函數中，調用了alert方法彈出了一個提示框。當用戶點擊該按鈕時，就會觸發監聽器中的代碼。

DOM 事件模型

// HTML 代碼
<div id="outer">
<div id="inner"></div>
</div>
// JavaScript 代碼
document.getElementById('outer').addEventListener('click', function () {
alert('點擊了外層元素');
});
document.getElementById('inner').addEventListener('click', function () {
alert('點擊了內層元素');
});

上面的代碼有一個外層元素和一個內層元素，均添加了點擊事件監聽器。當用戶點擊內層元素時，實際上也會同時觸發外層元素的監聽器函數。這是因為傳統的 DOM 事件模型中，事件會從目標元素（如內層元素）開始，按照從內到外的順序依次觸發所遇到的元素的監聽器。

事件對象

// HTML 代碼
<button id="btn">點擊我</button>
// JavaScript 代碼
document.getElementById('btn').addEventListener('click', function (event) {
console.log(event);
});

在事件監聽器函數中，可以傳入一個事件對象（event），該對象包含了有關事件的各種信息，如事件類型（type）、發生時間（timeStamp）、目標元素（target）等等。通過事件對象，可以實現對事件的更加精細的控制。

阻止默認行為和事件冒泡

// HTML 代碼
<a  id="link">百度</a>
// JavaScript 代碼
document.getElementById('link').addEventListener('click', function (event) {
event.preventDefault(); // 阻止默認行為
event.stopPropagation(); // 阻止事件冒泡
});

當用戶點擊一個帶有 href 屬性的鏈接時，瀏覽器會自動執行跳轉頁面的默認行為，而有時候我們需要自己控制點擊事件的行為。此時就可以使用事件對象的preventDefault方法來阻止瀏覽器默認行為。并且還可以使用stopPropagation方法來阻止事件進一步向父級元素傳遞，即事件冒泡。

總結

JavaScript 的事件機制是實現網頁動態交互的關鍵。有了事件監聽器的存在，我們可以精準地控制用戶操作所帶來的變化。同時，掌握事件對象的使用，可以讓我們進一步調整事件的行為。希望本文對于初學者對 JavaScript 事件機制有所幫助。