js switch语句在事件处理中的应用 - 问答

在 JavaScript 中，switch 语句通常用于根据变量的值执行不同的代码块。在事件处理程序中，switch 语句可以用于根据触发事件的对象或属性来执行不同的操作。

以下是一个简单的示例，演示了如何在事件处理程序中使用 switch 语句：

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');
    }
  }
});

在这个示例中，我们为三个按钮分别添加了点击事件监听器。当点击某个按钮时，会调用 handleClick 函数，并将被点击的按钮的 ID 作为参数传递。在 handleClick 函数中，我们使用 switch 语句根据传入的按钮 ID 执行相应的操作。

0 赞

0 踩