js switch語(yǔ)句在事件處理中的應(yīng)用

js
小樊
81
2024-10-16 06:59:02

在 JavaScript 中，switch 語(yǔ)句通常用于根據(jù)變量的值執(zhí)行不同的代碼塊。在事件處理程序中，switch 語(yǔ)句可以用于根據(jù)觸發(fā)事件的對(duì)象或?qū)傩詠?lái)執(zhí)行不同的操作。

以下是一個(gè)簡(jiǎn)單的示例，演示了如何在事件處理程序中使用 switch 語(yǔ)句：

HTML 代碼：

<!DOCTYPE html>
<html>
<head>
  <title>Switch statement in event handler</title>
</head>
<body>
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript 代碼 (script.js)：

document.addEventListener('DOMContentLoaded', function() {
  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');
  const btn3 = document.getElementById('btn3');

  btn1.addEventListener('click', function() {
    handleClick('Button 1');
  });

  btn2.addEventListener('click', function() {
    handleClick('Button 2');
  });

  btn3.addEventListener('click', function() {
    handleClick('Button 3');
  });

  function handleClick(buttonId) {
    switch (buttonId) {
      case 'Button 1':
        console.log('Button 1 clicked');
        break;
      case 'Button 2':
        console.log('Button 2 clicked');
        break;
      case 'Button 3':
        console.log('Button 3 clicked');
        break;
      default:
        console.log('Unknown button clicked');
    }
  }
});

在這個(gè)示例中，我們?yōu)槿齻€(gè)按鈕分別添加了點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)點(diǎn)擊某個(gè)按鈕時(shí)，會(huì)調(diào)用 handleClick 函數(shù)，并將被點(diǎn)擊的按鈕的 ID 作為參數(shù)傳遞。在 handleClick 函數(shù)中，我們使用 switch 語(yǔ)句根據(jù)傳入的按鈕 ID 執(zhí)行相應(yīng)的操作。

0 踩