面试题：Svelte自定义事件与DOM原生事件的交互处理

Question

假设在Svelte组件中有一个DOM元素绑定了原生点击事件，同时该组件需要分发一个自定义事件。当原生点击事件触发后，要确保自定义事件也能正确分发，且能传递特定的数据。请编写实现该功能的代码，并解释其中关键逻辑。

Answer 1

代码实现

<script>
    let dataToPass = { message: '这是要传递的数据' };

    function handleNativeClick() {
        // 分发自定义事件，并传递数据
        const customEvent = new CustomEvent('custom - click', { detail: dataToPass });
        document.dispatchEvent(customEvent);
    }
</script>

<button on:click={handleNativeClick}>点击我</button>

关键逻辑解释

1. 定义要传递的数据：在组件脚本部分，定义了一个对象dataToPass，这个对象包含了要在自定义事件中传递的数据。
2. 处理原生点击事件：handleNativeClick函数是原生点击事件的处理函数。当按钮被点击时，该函数会被调用。
3. 创建并分发自定义事件：在handleNativeClick函数内部，通过new CustomEvent('custom - click', { detail: dataToPass })创建了一个自定义事件custom - click，并将dataToPass作为事件的detail属性值。然后使用document.dispatchEvent(customEvent)将这个自定义事件分发出去，其他监听了custom - click事件的代码就可以接收到这个事件并获取到传递的数据。