svelte的事件

绑定事件

使用on:event={handler}属性来为元素绑定指定的事件

其中handler可以是函数名，也可以直接编写简单的处理函数

<button on:click={func}>num+1</button>
<button on:click={()=>num++}>num+1</button>
<button on:click={function(){num++}}>num+1</button>

事件修饰符

使用"|"字符为DOM事件添加修饰符来变更行为，可用的修饰符有

preventDefault ：取消时间默认行为，在运行事件处理程序之前调用event.preventDefault()
stopPropagation ：阻止事件冒泡，调用event.stopPropagation()
passive ：改善touch/wheel事件的滚动表现，Svelte会在合适的地方自动加上它
capture：在捕获阶段就触发处理程序，而非冒泡阶段
once ：在运行一次事件处理后，立即将其移除
self：仅当event.target是元素本身时才触发事件处理程序

修饰符可以链式使用，如：on:click|once|capture={...}

组件事件

父组件组件可以接受子组件传递过来的事件

父组件
<script>
    import Demo from 'path/demo.svelte';

    function myevent(event) {
        alert(event.detail.text);
    }
</script>
<Demo on:diyevent={myevent}/>

子组件
<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
  function sunevent() {
    dispatch('diyevent', {
      text: '传递的信息'
    });
  }
</script>

<button on:click={sunevent}>点击触发</button>

要完成子组件向父组件传递事件，需要：

1、需要创建一个事件分发器(dispatcher)
    通过引入的createEventDispatcher类创建
    必须在组件实例化时就调用它来创建分发器
    无法在组件一些特殊位置中创建(如用setTimeout延迟几秒之后创建)
2、某个特定的时刻通过事件分发器向父组件传递自定义的事件
    dispatch(diy_event_name, options)
        其中diy_event_name为我们自定义的事件名称
        options为一个对象，该对象可以在父组件中通过事件对象的detail属性获取
3、父组件通过on:event_name={}属性接受指定事件

事件转发

与DOM事件不同，组件事件不会冒泡。如果要在某个深层嵌套的组件上监听事件，则中间组件必须转发该事件

其实原理很简单，就是中间件也创建一个事件分发器，在接受到指定事件时并通过事件分发器将事件进一步向上传播

不过如果层次过深，这么一层层地转发会产生大量的无用代码

Svelte中有一种简写方式：on:event属性不指定值，就代表“转发所有指定事件”，Svelte自动生成与子组件发送事件的相同代码

<Demo on:diyevent />

同理，在svelte中，DOM事件也可以通过该简写方式进行DOM事件转发