事件绑定
- <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.
来源: http://www.jianshu.com/p/88367228eb6f