svelte教程（5）事件

DOM 事件

事件綁定

<script>
  let m = { x: 0, y: 0 };
  function handleMousemove(event) {
    m.x = event.clientX;
    m.y = event.clientY;
  }
</script>

<style>
  div {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    background: seagreen;
  }
</style>

<div on:mousemove={handleMousemove}>The mouse position is {m.x} x {m.y}</div>

您還可以內聯聲明事件處理程序,並且因爲svelte實際上是一個編譯器，所以並不會影響性能。

<script>
  let m = { x: 0, y: 0 };
</script>

<style>
  div {
    margin: 20px auto;
    width: 500px;
    height: 500px;
    background: seagreen;
  }
</style>
<div
  on:mousemove={e => {
    m.x = e.clientX;
    m.y = e.clientY;
  }}>
  The mouse position is {m.x} x {m.y}
</div>

事件修飾符

事件可以擁有改成其行爲的修飾符。

• preventDefault：阻止默認事件
• stopPropagation：停止事件的傳播
• passive：改善了觸摸/滾輪事件的滾動性能（Svelte會在安全的地方自動添加）
• capture：事件在捕獲階段觸發
• once：事件運行一次後取消監聽
• self：僅當event.target是元素本身時才觸發

您可以將修飾符鏈接在一起，例如on:click|once|capture={...}

組件事件

組件也可以觸發事件。

Inner.svelte
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

index.svelte
<Inner on:message={e=>{alert(e.detail.text)}}/>

createEventDispatcher必須在首次實例化組件時調用它-稍後無法在內部（例如setTimeout回調）進行調用。

事件轉發

createEventDispatcher方法觸發的事件不會進行冒泡。我們可以通過在外層組件監聽message方法再轉發到index.svelte。

// outer.svelte
<script>
  import Inner from "./Inner";
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  function forward(event) {
    dispatch("message", event.detail);
  }
</script>
<Inner on:message={forward} />

// index.svelte
<Outer on:message={e => {
    alert(e.detail.text);
  }} />

如果on:message沒有值可以轉發所有message事件：

// outer.svelte
<script>
  import Inner from "./Inner";
</script>
<Inner on:message/>

// index.svelte
<Outer on:message={e => {
    alert(e.detail.text);
  }} />

DOM 事件轉發

事件轉發一樣可以用在dom事件上：

// FancyButton.svelte
<style>
    button {
        font-family: 'Comic Sans MS';
        font-size: 2em;
        padding: 0.5em 1em;
        color: royalblue;
        background: gold;
        border-radius: 1em;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
</style>

<button on:click>
    Click me
</button>

// index.svelte
<script>
    import FancyButton from './FancyButton.svelte';

    function handleClick() {
        alert('clicked');
    }
</script>

<FancyButton on:click={handleClick}/>

本教程的所有代碼均上傳到github有需要的同學可以參考 https://github.com/sullay/svelte-learn。