svelte教程(5)事件-阿里云开发者社区

开发者社区> sullay> 正文

svelte教程(5)事件

简介: DOM 事件 事件绑定 <script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.
+关注继续查看

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spotify的牛是如何炼成的?
编著者按:笔者近期在思考工程文化相关的内容,除了自我总结以及对Google、Facebook的一些探索外,目光再次投向了Spotify这家公司。这是一个高速增长的故事,这是以一个工程文化知名的故事,同时这也是敏捷圈在讲的故事。
5 0
看完这篇,你不可能不懂「动态代理」
四个版本迭代,带你一步步模拟JDK动态代理
10 0
系统稳定性设计原则:简单、冗余、标准化、健壮
系统稳定性设计原则:简单、冗余、标准化、健壮
9 0
阿里云,容器服务领导者!
日前,权威咨询机构 Forrester 发布:2022 Q1 全球公共云容器平台报告,阿里云稳居“领导者”象限,当前容器产品能力评分最高
19 0
+关注
18
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载