[Svelte-demo (2)] 이벤트 핸들링

<script>
// 	import { onMount } from 'svelte'
	let name = 'world';
	let isRed = false
// 	onMount(() => {
// 		const box = document.querySelector('.box')
// 		box.addEventListener('click', () => {isRed = !isRed})
// 	})
</script>

<h1>Hello {name}!</h1>
<div class="box" 
		 style="background-color: {isRed ? 'red' : 'orange'};"
		 on:click={() => {isRed = !isRed}}
		 on:mouseenter={() => {name = 'enter'}}
		 on:mouseleave={() => {name = 'leave'}}
		 >
	Box!
</div>

<style>
	.box {
		width: 300px;
		height: 150px;
		background-color: orange;
	}
</style>

on: (on directive)은 addEventListener에 붙일 수 있는 모든 이벤트들을 다 작성할 수 있다.

 

 

<script>
	let text = ''
</script>

<h1>
	{text}
</h1>
<!-- 양방향 바인딩 value={text} 방법 -->
<input type='text' 
			 value={text}
			 on:input={(e) => {text  = e.target.value}} />
<button on:click={() => {text = 'duckracoon'}}>
	방법1
</button>

<br>

<!-- 양방향 바인딩 bind:value 방법 -->
<input type="text"
			 bind:value={text} />
<button on:click={() => {text = 'duckracoon'}}>
	방법2
</button>

양방향 바인딩