事件處理(Handling Events) | Javascript

在 JavaScript 中，事件驅動允許開發者創建與使用者互動的網頁。

事件處理:

  1. addEventListener: 使用addEventListener方法將點擊事件處理程序附加到元素。
const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  // 在此處添加點擊事件處理邏輯
});
  1. 事件對象: 存取事件對象以收集有關點擊事件的信息。
myButton.addEventListener('click', function(event) {
  console.log('點擊座標:', event.clientX, event.clientY);
});
  1. removeEventListener: 如有需要，使用removeEventListener分離點擊事件處理程序。
function handleClick() {
  // 在此處添加點擊事件處理邏輯
}

myButton.addEventListener('click', handleClick);

// 刪除事件監聽器
myButton.removeEventListener('click', handleClick);

示範代碼:

// 獲取按鈕元素
const myButton = document.getElementById('myButton');

// 附加點擊事件處理程序
myButton.addEventListener('click', function(event) {
  // 在點擊時切換CSS類
  event.target.classList.toggle('active');

  // 記錄點擊的按鈕文本內容
  console.log('點擊的按鈕:', event.target.textContent);
});