阅读量: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 执行相应的操作。