面试题：Svelte中常见事件修饰符及其应用场景

Question

请列举至少三个Svelte中的事件修饰符，并分别阐述它们适用于哪些常见的事件处理场景，同时给出简单代码示例。

Answer 1

1. preventDefault
   • 适用场景：当需要阻止事件的默认行为时使用。例如，在提交表单时，不想让表单自动提交到服务器，而是进行自定义的验证和处理。
   • 代码示例：

<script>
    function handleSubmit() {
        console.log('Form submitted, but not sent to server');
    }
</script>

<form on:submit|preventDefault={handleSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
</form>

2. stopPropagation
   • 适用场景：用于阻止事件冒泡。比如有多层嵌套的元素，点击内层元素时，不希望外层元素的相同类型事件也被触发。
   • 代码示例：

<script>
    function handleInnerClick() {
        console.log('Inner div clicked');
    }

    function handleOuterClick() {
        console.log('Outer div clicked');
    }
</script>

<div on:click={handleOuterClick}>
    Outer div
    <div on:click|stopPropagation={handleInnerClick}>
        Inner div
    </div>
</div>

3. once
   • 适用场景：希望事件处理函数只执行一次，之后即使再次触发该事件，函数也不会再执行。例如，页面加载时，只希望执行一次某个初始化相关的点击操作。
   • 代码示例：

<script>
    let clicked = false;
    function handleClick() {
        clicked = true;
        console.log('Clicked, but only once');
    }
</script>

<button on:click|once={handleClick}>
    {clicked? 'Already clicked' : 'Click me'}
</button>

4. passive
   • 适用场景：在处理scroll等事件时，告诉浏览器该事件处理函数不会调用preventDefault，从而提高滚动性能。常用于移动端页面的滚动操作。
   • 代码示例：

<script>
    function handleScroll() {
        console.log('Scrolled');
    }
</script>

<div style="height: 200px; overflow: auto" on:scroll|passive={handleScroll}>
    <p>Some long text to make the div scrollable...</p>
</div>