面试题：Svelte事件委托中如何处理动态添加元素的事件

Question

在Svelte应用里，初始有一个列表通过事件委托处理点击事件。现在要求当通过按钮动态添加新列表项时，新添加的列表项同样能通过事件委托处理点击事件，应该如何实现？详细说明实现思路并给出核心代码。

Answer 1

实现思路

1. 事件委托原理：在Svelte中，事件委托是将子元素的事件绑定到父元素上。因为事件会冒泡，所以当子元素触发事件时，父元素可以捕获到。
2. 动态添加列表项：通过一个按钮来触发添加新列表项的操作。在添加新列表项时，不需要为每个新项单独绑定点击事件，因为已经在父元素上设置了事件委托。
3. 保持事件委托的有效性：确保在添加新列表项后，父元素的事件委托依然能捕获到新项的点击事件。这通常只需要确保新项被正确添加到设置了事件委托的父元素内即可。

核心代码

<script>
    let items = ['item1', 'item2'];
    function addItem() {
        items = [...items, 'new item'];
    }
    function handleClick(event) {
        console.log(`Clicked on: ${event.target.textContent}`);
    }
</script>

<button on:click={addItem}>Add Item</button>

<ul on:click={handleClick}>
    {#each items as item}
        <li>{item}</li>
    {/each}
</ul>

在上述代码中：

• items数组初始包含一些列表项。
• addItem函数用于动态添加新列表项，通过展开运算符创建新数组并添加新项。
• handleClick函数是事件委托处理函数，它通过event.target.textContent获取点击的列表项文本并打印。
• <ul>元素设置了on:click事件委托，当<li>元素（无论是初始还是动态添加的）被点击时，handleClick函数都会被调用。