面试题：Svelte中如何实现简单的事件委托并处理多个子元素点击事件

Question

假设你有一个包含多个按钮的Svelte组件，如何通过事件委托的方式，在父元素上统一处理这些按钮的点击事件，并获取点击按钮的相关信息？请写出关键代码片段。

Answer 1

1. Svelte组件结构：

   • 首先创建一个包含多个按钮的Svelte组件，假设名为 ButtonGroup.svelte。

   <div bind:this={parentDiv} class="button - group">
       <button value="button1">Button 1</button>
       <button value="button2">Button 2</button>
       <button value="button3">Button 3</button>
   </div>
   
   <script>
       let parentDiv;
       function handleClick(event) {
           if (event.target.tagName === 'BUTTON') {
               const buttonValue = event.target.value;
               console.log(`Clicked button with value: ${buttonValue}`);
           }
       }
       // 绑定点击事件到父元素
       $: if (parentDiv) {
           parentDiv.addEventListener('click', handleClick);
       }
   </script>
   
   <style>
      .button - group {
           display: flex;
           gap: 10px;
       }
   </style>
   

   • 在上述代码中：
     • 创建了一个包含多个按钮的 div 元素，并使用 bind:this 指令将其引用存储在 parentDiv 变量中。
     • 定义了 handleClick 函数，该函数在父元素的点击事件触发时执行。
     • 通过 if (event.target.tagName === 'BUTTON') 判断点击的目标是否是按钮，如果是，则获取按钮的 value 属性值。
     • 使用 $: 语句确保当 parentDiv 有值时（即组件渲染完成后），为 parentDiv 添加点击事件监听器。

2. 另一种使用 on:click 指令的方式：

   <div class="button - group" on:click={handleClick}>
       <button value="button1">Button 1</button>
       <button value="button2">Button 2</button>
       <button value="button3">Button 3</button>
   </div>
   
   <script>
       function handleClick(event) {
           if (event.target.tagName === 'BUTTON') {
               const buttonValue = event.target.value;
               console.log(`Clicked button with value: ${buttonValue}`);
           }
       }
   </script>
   
   <style>
      .button - group {
           display: flex;
           gap: 10px;
       }
   </style>
   

   • 这种方式直接在 div 元素上使用 on:click 指令绑定点击事件处理函数 handleClick，逻辑与第一种方式类似，同样通过判断点击目标是否为按钮来获取按钮相关信息。