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

avatar
作者
筋斗云
阅读量:0

在 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 执行相应的操作。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!