事件绑定

每个框架都有自己独特的事件监听的写法，在Svelte中，按照以下格式进行事件监听的绑定。

on:eventname|modifiers={handler}

 

eventname是事件名，比如我们常用的 click、mousemove、keydown等等。

modifiers修饰符，这是一个可选项，有以下选项：

  • preventDefault：在程序运行之前调用 event.preventDefault()
  • stopPropagation ：调用event.stopPropagation(), 防止事件到达下一个标签
  • passive ：改善了touch/wheel事件的滚动表现
  • capture：表示在 capture阶段而不是bubbling触发其程序
  • once：表示事件只执行一次

比如我们写一个最常见的事件绑定，把数据声明和事件监听绑定起来：

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

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

 

在上述例子中，我们暂时没有用到事件修饰符。笔者再举个例子：

<script>
  let count = 0;
  const sayHello = () => {
    console.log("hello");
  };

  const updateCount = () => {
    count++;
  };
</script>

<div on:click={sayHello}>
  count: {count}
  <button on:click={updateCount}>+1</button>
</div>

此时如果我们点击button，那在控制台便会看到hello字符串也在打印出来。

想要阻止事件冒泡，一种方式是在监听的方法里设置 stopPropagation。

const updateCount = (event) => {
  event.stopPropagation();
  count++;
}

另一种方式就是使用刚才我们介绍的修饰符，这样我们就不用在我们的业务代码里处理冒泡逻辑。

<button on:click|stopPropagation={updateCount}>+1</button>

事件修饰符支持链式调用：

on:eventname|modifier1|modifier2|modifier3={handler}

有时我们在事件绑定中需要拿到event对象，而拿event对象的写法也分情况，一种是事件没有接受其他参数：

<script>
  const handleClick = (event) => {
    console.log(event);
  };
</script>

<button on:click={handleClick}>btn</button>

而另一种情况是，我们除了拿event对象，还需要让方法接收其他参数：

<script>
  const handleClick = (event, param) => {
    console.log(event, param);
  };
</script>

<button on:click={(e) => handleClick(e, "hello")}>btn</button>

这种内联的事件绑定还能按如下写，主要区别是在某些编辑器下的高亮显示支持：

<button on:click="{e => handleClick(e, 'hello')}">btn</button>

双向绑定

目前常见的软件开发架构模式有MVC、MVP、MVVM。

其中MVC（Model-View-Controller）分为三部分：

  • 模型（Model）：负责管理应用程序的数据
  • 视图（View）：主要对应应用程序中的用户交互页面
  • 控制器（Controller）：接收从用户界面传递进来的数据，调用相应的控制器来更新数据。数据更新后，会触发页面的更新。
MVC

而另一种架构模式MVVM，同样分为三部分：

  • 模型（Model）
  • 视图（View）
  • 视图模型（ViewModel）：负责暴露模型的数据和命令，以便视图可以使用它们。
MVVM