JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
이제 이벤트가 겹치면 어떻게 될까?
혹은 이벤트를 한번만 써야할때 어떻게 해야할까?
여러 이벤트에 대한 대처를 하는 방법에 대해서 기존의 native java script로도 구현은 가능하지만
기존의 방식보다 훨씬도 진보된 방식으로 사용할 수 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
위와 같은 방식의 코드가 존재한다고 하자.
이 코드는 각각의 div를 클릭할 때 알림창이 뜨게하는 메소드 이다.
이를 시행하면 어떻게 될지 여러분은 짐작이 가는가?
해당 div구간이 겹쳐져 있다 이 상태에서 이벤트를 호출하게된다면
div3을 누르면 div1,2가 호출될것이고 div2를 누르면 div1이 호출될것이다.
게다가 호출 순서 역시 중요하다. 여기서 div3을 누르면 함수가 어떤 순서로 호출이 될까?
당연하지만 func3->func2->func1순으로 호출된다.
이제 이 코드를 배이스로 코드를 수정해 보도록 하자.
capture
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click.capture="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
capture는 우선순위를 무시하고 가장 먼저 발동하게 된다.
위의 코드에서 capture가 되어있으므로 원래는 func3이 가장 먼저 실행되야 하지만
capture가 있으면 func1이 제일 먼저 실행되고 그다음 func3과 func2가 실행된다.
만약에 capture가 여러개라면 그 capture들 사이에서 원래 이벤트 우선순위대로 시행된다.
즉 func1과 func2에 capture가 걸린다면 func1과 func2는 원래의 이벤트 순서대로 되게 되는 것이다.
stop
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click.stop="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
stop은 이벤트의 흐름이 있으면 그 구간에서 이벤트가 멈추게 된다.
예를 들어서 div3을 누르면 func3이 작동한다. 그 다음 func2가 작동이된다.
그런데 stop이 func2가 걸려 있으므로 func1은 실행되지 않는다.
반대로 div2를 누르게 되면 func2가 실행된다. 그리고 stop이 걸려서 div1은 시행되지 않는다.
self
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click.self="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
self는 오로지 자기 자신만 호출할 수있다.
즉 div3을 누르면 div2를 누른게 아니므로 func2가 호출되진 않는다.
반대로 div2를 누르면 자기 자신을 누른것이므로 func2가 호출된다.
그리고 정상적으로 func1도 호출된다.
prevent
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
<a @click.prevent href="http://www.naver.com">naver링크</a>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
prevent는 해당 태그의 기능을 막는다.
예를 들어 anchor태그는 누르면 자동으로 링크로 이동한다.
그러나 prevent가 걸려 있다면 그 이벤트를 무효화 시키게 된다.
once
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<div id="div1" @click.once="func1" style="background: red; padding: 10px;">
div1
<div id="div2" @click.once="func2" style="background: green; padding: 10px;">
div2
<div id="div3" @click.once="func3" style="background: blue; padding: 10px;">
div3
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
func1: function () {
alert('func1');
},
func2: function () {
alert('func2');
},
func3: function () {
alert('func3');
}
}
});
</script>
</html>
once가 걸리게 되면 해당 이벤트를 한번만 시행할 수 있다.
한번 테스트 해보라. 이벤트가 두번 호출되지 않는다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-11]Router (0) | 2018.05.12 |
|---|---|
| [Vue-10]컴포넌트 (0) | 2018.03.13 |
| [Vue-08]이벤트 (0) | 2018.02.20 |
| [Vue-07]배열(Array) 및 연관배열(Object) 사용시 주의 사항 (2) | 2018.02.20 |
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |