Svelte 事件處理

tags: Svelte

category: Front-End

description: Svelte 事件處理

created_at: 2023/04/03 21:00:00

回到 手把手開始寫 Svelte

前言

終於到事件處理了，可以做比較多花樣(?)雖然前面應該有不小心出現了一些

基本使用

在 Svelte 事件處理也非常簡單，只要 on:事件={} 就可以了。

相信前面幾篇有出現過，應該都很熟悉了，假設 click 事件

<script>
    let count = 0;
    const add = () => {
        count++;
    };
</script>

<div>count: {count}</div>
<button on:click={add}>count++</button>

寫在行內

處理函數也可以寫在行內(inline)

<script>
    let count = 0;
</script>

<div>count: {count}</div>
<button on:click={() => count++}>count++</button>

事件變數

事件變數還是老樣子

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

<div on:mousemove={(e) => (mouse = { x: e.clientX, y: e.clientY })}>
    The mouse position is {mouse.x} x {mouse.y}
</div>

<style>
    div {
        width: 100%;
        height: 100vh;
        background: #eee;
    }
</style>

傳入參數

宣告個行內函數呼叫就可以

<script lang="ts">
    let text = 'default';

    const setText = (data: string) => {
        text = data;
    };
</script>

<div>{text}</div>
<button on:click={() => setText('Hello')}>Hello</button>
<button on:click={() => setText('World')}>World</button>

加入事件變數應該就不用舉例了吧

修飾符 modifier

如同 Vue 一樣，可以在宣告事件的時候後面加一些修飾幫你做掉一些事，例如 preventDefault() 或是 stopPropagation() 之類的。

目前 Svelte 提供以下(附上原生對應):

• preventDefault: 取消預設事件(例如連結、表單送出)

  addEventListener('<event>', (e) => {
    e.preventDefault()
  });

• stopPropagation: 取消事件冒泡(向上傳遞)

  addEventListener('<event>', (e) => {
    e.stopPropagation()
  });

• passive: 取消瀏覽器自動檢查 preventDefault 以提升效能，通常用在 scroll

  addEventListener('<event>', (e) => {
  }, {
    passive: true
  });

• nonpassive: 明確設定 passive 為 false

  addEventListener('<event>', (e) => {
  }, {
    passive: false
  });

• capture: 使用事件捕捉(向下傳遞)

  addEventListener('<event>', (e) => {
  }, {
    capture: true
  });
  // or
  addEventListener('<event>', (e) => {
  }, true);

• once: 只觸發一次

  addEventListener('<event>', (e) => {
  }, {
    once: true
  });

• self: 只在自己觸發(假設事件監聽在 ele 身上)

  ele.addEventListener('click', e => {
    if (e.target === ele) {
        // do...
    }
  })

• trusted: 只有 trusted 的事件才觸發(也就是透過程式觸發的不算)
  • 這個比較特別，可以把 e.isTrusted 印出來，然後嘗試主動去觸發他和用程式觸發他去看看他的變化。

舉例來說，我要一個按鈕，有一個 click 事件，然後只觸發一次，就可以這樣做

<button on:click|once={() => console.log('dispatch once')}>dispatch once</button>

也可以串聯多個修飾符做使用(|)，如下:

<a href="https://google.com" on:click|preventDefault|once={() => console.log('prevent once')}>
    Go to google
</a>

上面這個連結點一次會觸發 console.log，而第二次才會真的連結出去。

剩下的內容

「關於組件的事件處理」這個留到之後組件介紹過後再寫，不然會很雜亂。

總結

基本上語法就是 on:<event>|<modifier?>={<handler>} 的語法。

例如: on:click|once={() => console.log('Hi')}

• 參數分別如下
  • event: click
  • modifier: once
  • handler: () => console.log('Hi')