JavaScript – 事件

在JavaScript中，事件是一種可以被JavaScript代碼偵聽和觸發的交互行為。愛掏網 - it200.com通俗來說，就是當用戶在瀏覽器中進行某些操作時（例如點擊按鈕、鍵入文本或移動鼠標等），頁面就會產生一些特定的事件，我們可以通過編寫JavaScript代碼來監聽這些事件并做出相應的響應。愛掏網 - it200.com

在JavaScript中，我們可以通過addEventListener()方法以編程方式添加事件的監聽器。愛掏網 - it200.com此外，還有Event對象，可以通過Event對象來操作和獲取函數執行時所處的環境上下文等各種信息。愛掏網 - it200.com

在下面的示例代碼中，我們將介紹如何使用addEventListener()方法為按鈕添加監聽器，并演示如何使用Event對象。愛掏網 - it200.com

const myButton = document.querySelector('#myButton');

myButton.addEventListener('click', function(event) {
  alert('按鈕被點擊啦！');
  console.log(event);
});

在上面的代碼中，我們首先使用了querySelector()方法來獲取到一個ID為’myButton’的按鈕元素。愛掏網 - it200.com然后，我們調用了這個按鈕元素對象的addEventListener()方法，來給這個按鈕添加了一個點擊事件的監聽器。愛掏網 - it200.com

這個監聽器是一個匿名函數，當按鈕被點擊的時候，瀏覽器就會執行這個匿名函數中的代碼。愛掏網 - it200.com在這個示例中，我們用alert()方法彈出一個提示框來告訴用戶按鈕被點擊了，并用console.log()方法輸出了Event對象的內容到控制臺中。愛掏網 - it200.com

在Web開發中，一個很常見的情況是需要處理很多子元素的事件，如列表、表格等的點擊事件。愛掏網 - it200.com在這種情況下，我們可以使用事件委托來解決問題。愛掏網 - it200.com

所謂事件委托，就是將事件處理程序添加到頁面中的父元素上，而不是在每個子元素上添加它。愛掏網 - it200.com這樣，我們就可以通過事件冒泡的機制來處理子元素的事件，而無需在每個子元素上重復添加監聽器。愛掏網 - it200.com

<ul id="myList">
  <li>選項1</li>
  <li>選項2</li>
  <li>選項3</li>
</ul>

在上面的HTML代碼中，我們創建了一個無序列表，并給它設置了一個ID為’myList’。愛掏網 - it200.com

現在，我們來使用事件委托來為每個列表項添加一個點擊事件。愛掏網 - it200.com

const myList = document.querySelector('#myList');

myList.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName.toUpperCase() === 'LI') {
    const text = target.innerText;
    alert('你選擇了：' + text);
  }
});

在這個例子中，我們首先獲取到了ID為’myList’的列表元素，并為它添加了一個點擊事件的監聽器。愛掏網 - it200.com當這個監聽器被觸發時，我們通過Event對象獲取到了引發事件的事件目標，即單擊的列表項。愛掏網 - it200.com我們通過檢查目標元素的tagName屬性，來判斷是否單擊了列表項。愛掏網 - it200.com如果是列表項，我們就獲取它的innerText屬性，即選項文本，然后彈出一個提示框，告訴用戶選了哪個選項。愛掏網 - it200.com

自定義事件

在JavaScript中，我們可以自定義事件，并通過Event對象來觸發和處理這些事件。愛掏網 - it200.com

const myObject = {};

myObject.onReady = function() {
  console.log('我已經準備好了！');
};

myObject.triggerReady = function() {
  const event = new Event('ready');
  this.dispatchEvent(event);
};

myObject.addEventListener('ready', myObject.onReady);
myObject.triggerReady(); // 輸出 "我已經準備好了！" 到控制臺

在上面的例子中，我們首先創建了一個對象myObject，其中包含兩個方法：onReady()方法用于處理自定義事件，triggerReady()方法用于觸發自定義事件。愛掏網 - it200.com

triggerReady()方法先創建了一個Event對象。愛掏網 - it200.com我們給這個Event對象設置了一個’ready’的事件類型，并使用dispatchEvent()方法來將這個自定義事件分派到myObject中。愛掏網 - it200.com

接著，我們使用addEventListener()方法為對象myObject添加了一個’ready’事件的監聽器，并將它指向myObject.onReady方法。愛掏網 - it200.com

最后，我們調用triggerReady()方法來觸發’ready’事件，這就會調用myObject.onReady函數，將一條’我已經準備好了！’的信息輸出到控制臺。愛掏網 - it200.com

這就是自定義事件的基本用法，我們可以通過自定義事件來更靈活地實現一些需要監聽和處理的交互行為。愛掏網 - it200.com

阻止默認事件

在JavaScript中，可以通過Event對象來阻止事件的默認行為。愛掏網 - it200.com默認情況下，當某個元素的某個事件被觸發時，瀏覽器會執行該事件的默認操作。愛掏網 - it200.com例如，當用戶點擊一個鏈接時，瀏覽器會把用戶重定向到鏈接所指向的頁面。愛掏網 - it200.com

但是，在某些情況下，我們可能需要阻止默認事件的發生，以便在我們的代碼中做一些特殊的邏輯處理。愛掏網 - it200.com我們可以使用Event對象的preventDefault()方法來實現這個目的。愛掏網 - it200.com

<a  id="myLink">百度一下</a>

在上面的HTML代碼中，我們創建了一個鏈接元素，并給它設置了一個ID為’myLink’。愛掏網 - it200.com

現在，讓我們給這個鏈接元素添加點擊事件，并在點擊時阻止它的默認事件。愛掏網 - it200.com

const myLink = document.querySelector('#myLink');

myLink.addEventListener('click', function(event) {
  event.preventDefault();
  alert('你單擊了鏈接！');
});

在這個例子中，我們獲取了ID為’myLink’的鏈接元素，并為它添加了一個點擊事件的監聽器。愛掏網 - it200.com當鏈接被單擊時，監聽器就會被觸發。愛掏網 - it200.com

在監聽器中，我們調用了Event對象的preventDefault()方法，這就會阻止鏈接的默認事件的發生。愛掏網 - it200.com最后，我們彈出一個提示框來告訴用戶，鏈接被單擊了。愛掏網 - it200.com

停止事件冒泡

在JavaScript中，事件冒泡是指事件從目標元素開始，沿著它的祖先元素向上傳播的過程。愛掏網 - it200.com在某些情況下，我們可能會希望停止事件冒泡，以防止其他元素捕獲這個事件。愛掏網 - it200.com

我們可以使用Event對象的stopPropagation()方法來實現停止事件冒泡。愛掏網 - it200.com在下面的例子中，我們演示了如何使用stopPropagation()方法來停止事件冒泡。愛掏網 - it200.com

document.querySelector('#myLink').addEventListener('click', function(event) {
  alert('鏈接被單擊！');
  event.stopPropagation();
});

document.querySelector('body').addEventListener('click', function(event) {
  alert('頁面被單擊！');
});

在這個例子中，我們為一個鏈接元素和頁面的body元素分別綁定了一個點擊事件監聽器。愛掏網 - it200.com當鏈接元素被單擊時，它的監聽器就會被觸發，并彈出一個提示框，告訴用戶鏈接被單擊了。愛掏網 - it200.com

但是，如果我們沒有調用Event對象的stopPropagation()方法，這個事件就會繼續向上傳播，最終被body元素的監聽器所捕獲，并彈出另一個提示框，告訴用戶頁面被單擊了。愛掏網 - it200.com

如果我們調用了Event對象的stopPropagation()方法，事件冒泡就會在鏈接元素處停止，也就是說，頁面的body元素將不再捕獲這個事件。愛掏網 - it200.com

結論

在JavaScript中，事件是實現交互的重要組成部分。愛掏網 - it200.com在我們的Web應用程序中，我們可以通過監聽和處理事件來實現各種不同的交互效果。愛掏網 - it200.com

在本文中，我們介紹了一些常見的事件處理技術，包括使用addEventListener()方法添加事件監聽器、使用事件委托、自定義事件、阻止默認事件和停止事件冒泡等。愛掏網 - it200.com

這些技術可以幫助我們更好地理解和掌握JavaScript中的事件處理機制，從而實現更加靈活和高效的應用程序。愛掏網 - it200.com

希望讀者們通過本文能夠掌握基本的JavaScript事件處理技術，并能夠應用到自己的Web開發項目中。愛掏網 - it200.com