Vue - 이벤트 처리

h.Im·2024년 9월 10일

Vue 기초

목록 보기

22/28

이벤트 처리는 v-on 디렉티브로 사용할 수 있고, @단축 표현으로 많이 사용됩니다.

<button @click="subscribers++">subscribers++</button>

위 코드와 같이 이벤트 처리를 하는 것은 이전 글에서 많이 다루었으니 다루지 않았던 내용을 기록해 보겠습니다.

이벤트 객체 접근

<template>
	<!-- 이 주석대로 작성하면 오류($event라고 쓰지 않아서)
	<button @click="printEventInfo('Hello vue3', event)">
		inline event handler
	</button> -->
	<button @click="printEventInfo('Hello vue3', $event)">
		inline event handler
	</button>
	<hr />
	<input type="text" @keyup="onKeyupHandler" />
</template>

<script>
export default {
	setup() {
		const printEventInfo = (message, event) => {
			console.log('message', message)
			console.log('event.target', event.target)
			console.log('event.target.tagName', event.target.tagName)
		}

		const onKeyupHandler = (event) => {
			console.log('event.key', event.key)
		}
		return { printEventInfo, onKeyupHandler }
	},
}
</script>

<style></style>

@click="" 내부에서 $event로 이벤트 객체에 접근할 수 있습니다.

이벤트 수식어

이벤트 내부에서 event.preventDefault(), event.stopPropagation() 메서드를 호출하던 일반 javascript 코드와 달리, 비즈니스 로직에 집중하도록 vue에서는 이벤트 수식어를 제공합니다.

.stop, .prevent

.stop = e.stopPropagation
.prevent = e.preventDefault

<template>
	<div id="modifiers">
		<div @click="clickDiv">
			DIV 영역
			<p @click="clickP">
				P 영역
				<!-- .stop modifier를 붙여 버블링 막기 -->
				<span @click.stop="clickSpan">SPAN 영역</span>
				<!-- .prevent modifier를 붙여 디폴트 액션인 href 동작이 막힌다 -->
				<a @click.prevent="clickA" href="https://naver.com">a 영역</a>
			</p>
		</div>
	</div>
</template>

<script>
export default {
	setup() {
		const clickDiv = () => {
			console.log('clickDiv')
		}
		const clickP = () => {
			console.log('clickP')
		}
		const clickSpan = () => {
			console.log('clickSpan')
		}
		const clickA = () => {
			console.log('clickA')
		}
		return { clickDiv, clickP, clickSpan, clickA }
	},
}
</script>

<style>
#modifiers div,
#modifiers p,
#modifiers span {
	padding: 40px;
}

#modifiers div {
	background-color: #ccc;
}

#modifiers p {
	background-color: #999;
}

#modifiers span {
	background-color: #666;
	display: block;
}
</style>

@click.stop으로 이벤트 핸들링을 하면 이벤트 버블링이 되지 않게 되므로 clickP, clickDiv 핸들러는 호출되지 않습니다.

@click.prevent으로 이벤트 핸들링을 하면 a태그의 기본 동작인 링크 이동은 동작하지 않고, 등록한 이벤트 핸들러만 동작합니다.

.capture

이벤트 캡처링을 위한 속성입니다.

<template>
	<div id="modifiers">
		<!-- .capture modifier로 span 클릭시 span -> p -> div이던 순서를
		div -> span -> p로 바꾼다 -->
		<div @click.capture="clickDiv">
			DIV 영역
			<p @click="clickP">
				P 영역
				<span @click="clickSpan">SPAN 영역</span>
				<a @click.prevent="clickA" href="https://naver.com">a 영역</a>
			</p>
		</div>
	</div>
</template>

<script>
export default {
	setup() {
		const clickDiv = () => {
			console.log('clickDiv')
		}
		const clickP = () => {
			console.log('clickP')
		}
		const clickSpan = () => {
			console.log('clickSpan')
		}
		const clickA = () => {
			console.log('clickA')
		}
		return { clickDiv, clickP, clickSpan, clickA }
	},
}
</script>

<style>
#modifiers div,
#modifiers p,
#modifiers span {
	padding: 40px;
}

#modifiers div {
	background-color: #ccc;
}

#modifiers p {
	background-color: #999;
}

#modifiers span {
	background-color: #666;
	display: block;
}
</style>

.self

.self 속성이 붙는 경우, 자기 자신이 클릭된 경우가 아니라면, 핸들러가 호출되지 않습니다.

<template>
	<div id="modifiers">
		<div @click="clickDiv">
			DIV 영역
			<!-- p영역을 클릭하면 clickP, clickDiv 호출 -->
			<p @click.self="clickP">
				P 영역
				<!-- span 영역을 클릭하면 clickP가 호출되지 않고 clickSpan, clickDiv만 호출 -->
				<span @click="clickSpan">SPAN 영역</span>
				<a @click.prevent="clickA" href="https://naver.com">a 영역</a>
			</p>
		</div>
	</div>
</template>

<script>
export default {
	setup() {
		const clickDiv = () => {
			console.log('clickDiv')
		}
		const clickP = () => {
			console.log('clickP')
		}
		const clickSpan = () => {
			console.log('clickSpan')
		}
		const clickA = () => {
			console.log('clickA')
		}
		return { clickDiv, clickP, clickSpan, clickA }
	},
}
</script>

<style>
#modifiers div,
#modifiers p,
#modifiers span {
	padding: 40px;
}

#modifiers div {
	background-color: #ccc;
}

#modifiers p {
	background-color: #999;
}

#modifiers span {
	background-color: #666;
	display: block;
}
</style>

.once

등록한 이벤트 핸들러가 단 한 번 호출될 필요가 있을때 사용합니다.

<template>
	<button @click.once="clickBtn">여러 번 눌러도 clickBtn은 한 번 호출</button>
</template>

<script>
export default {
	setup() {
		const clickBtn = () => {
			console.log('clickBtn')
		}
		return { clickBtn }
	},
}
</script>

<style></style>