（9）svelte 教程： Event Modifiers

（9）svelte 教程： Event Modifiers

什么是 Event Modifiers

Event Modifiers 是 Svelte 框架中的一种特性，它允许你在绑定事件处理函数时，添加一些修饰符来修改事件的默认行为或事件流。通过这些修饰符，可以更简洁、更直观地控制事件的行为，而无需在事件处理函数中编写额外的代码。常见的 Event Modifiers 包括：

• preventDefault：阻止事件的默认行为。
• stopPropagation：阻止事件冒泡。
• self：仅在事件的目标元素上触发事件处理函数，而不在其子元素上触发。
• once：确保事件处理函数只执行一次。
• capture：在捕获阶段处理事件，而不是冒泡阶段。
• passive：提示浏览器事件处理程序不会调用 preventDefault，以便优化性能。

逐行解释代码

App.svelte

<script>
    import Modal from './Modal.svelte';

    let showModal = false;

    let toggleModal = () => {
      showModal = !showModal;
    };
</script>

• import Modal from './Modal.svelte';

  • 从当前目录中导入名为 Modal 的 Svelte 组件。

• let showModal = false;

  • 声明一个名为 showModal 的变量，初始值为 false。这个变量用于控制 Modal 组件的显示与隐藏。

• let toggleModal = () => { showModal = !showModal; };

  • 声明一个名为 toggleModal 的箭头函数。这个函数的作用是切换 showModal 的值，使其在 true 和 false 之间切换。

<Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />
<main>
    <button on:click|once={toggleModal}>Open Modal</button>
</main>

• <Modal message='Hello, Ninjas!' {showModal} on:click={toggleModal} />

  • 使用 Modal 组件，并传递三个属性：
    • message='Hello, Ninjas!'：向 Modal 组件传递一个名为 message 的字符串属性，值为 ‘Hello, Ninjas!’。
    • {showModal}：将 showModal 变量的当前值传递给 Modal 组件，使其能根据该值决定是否显示。
    • on:click={toggleModal}：监听 Modal 组件的 click 事件，当该事件触发时，调用 toggleModal 函数。

• <main> 和 <button on:click|once={toggleModal}>Open Modal</button>

  • 创建一个 main 元素，并在其内部创建一个按钮。
  • on:click|once={toggleModal}：为按钮绑定 click 事件，并添加 once 修饰符。点击按钮时，调用 toggleModal 函数，且此函数只执行一次，按钮的点击事件处理器随后会自动移除。

Modal.svelte

<script>
    export let showModal = false;
    export let isPromo = false;
    export let message = 'default message';
</script>

• export let showModal = false;