SvelteJs学习——事件

1. 事件on: [事件] = {事件名}

• 事件名称可选： click、mousemove、mouseover …

<script>
	let movePoint = { x: 0, y: 0}
	function handleMousemove(e) {
		movePoint.x = e.clientX;
		movePoint.y = e.clientY;
	}

</script>

<main>
	<div on:mousemove={handleMousemove} class="divSize">
		滑动位置的坐标为: {movePoint.x}, {movePoint.y}
	</div>
	
</main>

<style>
	.divSize {
		width: 100vw;
		height: 100vh;
		background-color: aqua;
	}
</style>

2. 内联事件

• 会正常执行函数，但是看起来不清晰，不建议这样使用

<main>
	<div on:mousemove="{e => movePoint= {x: e.clientX, y: e.clientY}}" class="divSize">
		滑动位置的坐标为: {movePoint.x}, {movePoint.y}
	</div>
	
</main>

3. 事件修饰符 on:[事件]|[修饰符]={事件名}

DOM事件处理程序具有额外的修饰符。修饰符的使用格式

3.1 once: 运行一次事件处理程序后将其删除

<script>
	function handleClick() {
		console.log('点击')
	}
</script>
<main>
	<button on:click|once={handleClick}>处理一次</button>
</main>

3.2 preventDefault: 阻止默认行为

a标签内输入内容，若不阻止事件的默认行为，那么会跳转到baidu.com上去，
若我们有其他用途则会收到影响。同样在处理表单时这个修饰符也可使用

<script>
	function handleClick() {
		console.log('点击')
	}
</script>

<main>
	<a href="www.baicu.com" on:click|preventDefault={handleClick}>不跳转的a标签</a>
</main>

3.2 stopPropagation：阻止事件冒泡

直接点击子元素，发现不仅执行了子元素的事件，还执行了父元素的事件。加上stopPropagation会发现，子元素对父元素的影响消除了。

<script>
	function parentClick() {
		console.log('你好，我是你的父元素')
	}
	function childClick() {
		console.log('你好，我是你的子元素')
	}
</script>

<main>
	<div class="parent-el" on:click={parentClick}>
		父元素
		<div class="child-el" on:click|stopPropagation={childClick}>
			子元素
		</div>
	</div>
</main>

<style>
	.parent-el {
		width: 200px;
		height: 200px;
		background-color: aqua;
	}
	.child-el {
		width: 100px;
		height: 100px;
		background-color: blueviolet;
	}

</style>

3.3 passive: 优化了对touch/wheel事件的滚动表现(Svelte会在合适的地方自动添加滚动条)

• wheel: 表示用户滚动鼠标滚轮或类似输入设备时触发的事件
• touche: 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

3.4 capture: 在capture阶段而不是bubbling阶段触发事件处理程序

• capture： 捕获，自上而下
• bubbling： 冒泡，自下而上

3.5 self: 仅当event.target是其本身时才执行

同样可以解决事件冒泡问题。因为子元素冒泡会执行父元素的事件。那么只要将父元素内容设置.self，这样只有点击父元素的target才会执行这个事件。

<script>
	function parentClick() {
		console.log('你好，我是你的父元素')
	}
	function childClick() {
		console.log('你好，我是你的子元素')
	}
</script>

<main>
	<div class="parent-el" on:click|self={parentClick}>
		父元素
		<div class="child-el" on:click={childClick}>
			子元素
		</div>
	</div>
</main>

<style>
	.parent-el {
		width: 200px;
		height: 200px;
		background-color: aqua;
	}
	.child-el {
		width: 100px;
		height: 100px;
		background-color: blueviolet;
	}

</style>

4. 组件事件(组件传值)

组件也可以调度事件，为此，组件内必须创建一个相同的事件并在外部进行分配。

• 在子组件中引入createEventDispatcher
• 子组件中设定触发事件方法，并调用dispatch(’父组件调用子组件方法名‘,{参数})
• 父组件中引入子组件
• 父组件中 on:子组件方法名={处理函数}

使用实例：

• Child.svelte

<script>
    import { createEventDispatcher } from 'svelte'
    const dispatch = createEventDispatcher()
    function sendMsgToParent() {
        dispatch('msg', {
            text: '给父亲的一首诗'
        })
    }
</script>
<main>
    <button on:click={sendMsgToParent}>
        我是子组件，点击我给父组件传个值
    </button>
</main>

• Parent.svelte

<script>
	import Child from './components/Child.svelte'

	function handleMsg(event) {
		console.log(event.detail.text, '子组件传过来的值')
	}

</script>

<main>
	<Child on:msg={handleMsg} />
</main>

<style>

</style>

createEventDispatcher必须在首次实例化组件时调用它。组件本身不支持如setTimeout之类的事件回调。定义一个dispatch进行连接，进而把组件实例化。

5. 事件转发

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

模块4中我们距离了Parent和Child组件通信，事件转发与其相似，只不过外面多了一层Outer组件包裹

简写后：

• Child.svelte 子组件

<script>
    import { createEventDispatcher } from 'svelte'
    const dispatch = createEventDispatcher()
    function sendMsgToParent() {
        dispatch('msg', {
            text: '给父亲的一首诗'
        })
    }
</script>
<main>
    <button on:click={sendMsgToParent}>
        我是子组件，点击我给父组件传个值
    </button>
</main>

• Outer.svelte 中间件

<script>
    import Child from './Child.svelte'
</script>
<main>
    <Child on:msg/>
</main>

• Parent.svelte 父组件

<script>
	import Outer from './components/Outer.svelte'

	function handleMsg(event) {
		console.log(event.detail.text, '子组件传过来的值')
	}

</script>

<main>
	<Outer on:msg={handleMsg}/>
</main>

6. DOM事件转发

事件转发也可以应用至DOM事件中。我们可以自主封装一个button按钮，有固定的样式，符合整个页面的风格。

• CustomButton.svelte 定义button的文件，包括样式，和抛出去的方法

<script>
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher()
    function HandleClickEvent() {
        dispatch('myClick')
    }
</script>
<main>
    <button on:click={HandleClickEvent}>点击</button>
</main>
<style>
    button {
        border-radius: 4px;
        background-color: blue;
        color: white;
        width: 80px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        margin: 0;
        padding: 0;
    }
    button:hover {
        background-color: aqua;
    }
</style>

• FancyButton.svelte 中间件转发

<script>
    import CustomButton from './CustomButton.svelte'
</script>
<main>
    <CustomButton on:myClick/>
</main>

• App.svelte 其他页面中的应用

<script>
	import CustomButton from './components/CustomButton.svelte'
	function appClick() {
		console.log('app Click')
	}
</script>

<main>
	<CustomButton on:myClick={appClick}/>
</main>

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~