面试题：Svelte中如何处理表单提交事件并阻止默认行为

Question

在Svelte中，给定一个简单的表单元素，例如`<form><input type='text' name='username'><button type='submit'>提交</button></form>`，请写出处理表单提交事件，并阻止其默认提交行为（即不刷新页面）的代码，同时获取输入框中的值。

Answer 1

<script>
    let usernameValue;

    const handleSubmit = (event) => {
        event.preventDefault();
        usernameValue = event.target.username.value;
        console.log('用户名:', usernameValue);
    };
</script>

<form on:submit={handleSubmit}>
    <input type='text' name='username'>
    <button type='submit'>提交</button>
</form>