04 이벤트 (Events)
이벤트란?
어떤 사건을 뜻하는 말로, 웹에서는 클릭, 스크롤 등 사용자의 행동과 관련된 결과를 출력
사용자와 웹페이지의 상호작용(Interaction)이 가능하게 해줌
HTML에서는 HTML에는 a 태그나 input과 같은 기본 기본 이벤트가 있다.
자바스크립트를 사용한 이벤트
<div id="app">
<button type="button" onclick="alert('hi')">Click me</button>
</div>결과화면
뷰에서 이벤트를 사용하기 위해서는 v-on 디렉티브를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="sayHello">Click me</button>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
sayHello(){
alert('안녕하세요 반갑습니다.')
}
},
})
</script>
</body>
</html>결과화면
div 컬러를 변경하는 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="style"></div>
<button type="button" v-on:click="setRedColor">red</button>
<button type="button" v-on:click="setOrangeColor">orange</button>
</div>
<script>
new Vue({
el: '#app',
data: {
style:{
backgroundColor:'dodgerblue',
width: '200px',
height:'200px'
}
},
methods: {
setRedColor(){
this.style.backgroundColor = 'red';
},
setOrangeColor(){
this.style.backgroundColor = 'orange';
}
},
})
</script>
</body>
</html>결과화면
form태그에 이벤트 연결, form태그의 기본 동작을 막기위해서 자바스크립트에서는 event.preventDefault() 호출해서 사용하는데 뷰에서는 v-on 이벤트에 이벤트 수식어를 제공
수식어는 점으로 표시된 접미사 입니다.
.stop
.prevent
.capture
.self
.once
.passive
v-on:submit에 .prevent를 입력하면 새로고침이 일어나지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<input type="text" />
<button type="submit">제출</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
setRedColor(){
this.style.backgroundColor = 'red';
},
setOrangeColor(){
this.style.backgroundColor = 'orange';
}
},
})
</script>
</body>
</html>
다양한 이벤트수식어
<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>
Hello!