이벤트 처리는 v-on 디렉티브로 사용할 수 있습니다.
그리고 v-on 이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용됩니다
메소드 이벤트 핸들러
v-on 디렉티브에서 메소드를 호출할 수 있습니다.
그리고 이때 매개변수로 event 객체를 받습니다
event.target으로 엘리먼트에 접근 할 수 있다.
이벤트 객체 접근
인라인 핸들링에서 event 객체에 접근할 수 있습니다.
접근하는 방법은 $event 키워드를 사용합니다.
바로 함수를 실행시키고 싶을때 $event로 event 객체에 접근한다.
디렉티브 구성
디렉티브는 다음과 같이 구성되어 있습니다.
- 디렉티브(Directives) : v- 접두사가 있는 특수 속성으로 디렉티브의 값이 변경될때 특정 효과를 반응적으로 DOM에 적용하는것을 말합니다.
- 전달인자(Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자를 가질 수 있습니다. 예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용합니다.
- 동적 전달인자 : 대괄호를 사용하여 전달인자를 동적으로 삽입할 수 있습니다.
<a v-bind : [attributeName]="url"> ... </a> - 수식어 (Modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사로 디렉티브가 특별한 방식으로 바인딩 되어야 함을 나타냅니다.
- 동적 전달인자 : 대괄호를 사용하여 전달인자를 동적으로 삽입할 수 있습니다.
이벤트 수식어 (Modifiers)
우리는 이벤트를 조작할 때 이벤트 내부에서 event.preventDefault() 또는 event.stopPropagation() 메서드를
호출할 수 있습니다. 메소드에서 이러한 메소드의 호출은 어렵지 않지만 메소드 안에서 비지니스 외에 이러한 코드는 비효율적 입니다.
( event.preventDefault() = 기본 기능을 막음, event.stopPropagation() 이벤트 전파를 막음)
이 문제를 해결하기 위해 Vue는 v-on 이벤트에 다양한 이벤트 수식어(Modifiere)를 제공합니다
- .stop = e.stopPropagation()
- .prevent = e.preventDefault()
- .capture = 캡쳐 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.
- .self = 오로지 자기 자신만 호출할수 있다. 즉, 타깃요소가 self일때 발동된다.
- .once = 해당 이벤트는 한번만 실행된다.
- .passive = 일반적으로 모바일 장치의 성능을 개선 하기위해 터치 이벤트리스너와 함께 사용됩니다.
DOM에서 span을 click한건데 div 와 p까지 click 된다.
이건 이벤트 버블링으로 이벤트가 상위 요소까지 전파된거다.
div에 이동 이벤트가 있고 Span에 좋아요 이벤트가 있다 가정하면.
좋아요 버튼을 눌렀는데 네이버로 이동 되는 상황이 발생될 수 있다.
이럴때 이벤트 전파를 막기위해 쓰는것이 e.stopPropagation이다.
Vue에서는 @click.stop=" " 으로 사용 가능하다.
HTML 태그마다 기본 기능이 있는데 e.preventDefault()는 태그의 기본 기능을 막는다.
예를 들어 a태그의 사이트 이동 기능을 막을수 있다.
Vue에서는 @click.prevent= " " 로 사용 가능하다.
수식어를 연계해서도 사용 가능하다.
@click.prevent.stop=" " 으로 사용하면 기본기능도 막고 이벤트 버블링도 막는다.
span영역을 클릭했는데 div영역 부터 이벤트가 실행되게 하고싶으면
div 태그에 @click.capture=" " 를 쓰면된다.
span을 클릭해도 div의 이벤트부터 실행 된다.
키 수식어
키보드 이벤트를 수신할 때 종종 특정 키를 확인해야 하는 경우가 있습니다.
그래서 Vue에서는 v-on 또는 @ 디렉티브에 키 수식어를 제공합니다
- .enter
- .tab
- .delete ("Delete"와 "Backspace" 키 모두를 수신합니다)
- .esc
- .space
- .up
- .down
- .left
- .right
시스템 키 수식어
다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있습니다.
- .ctrl
- .alt
- .shift
- .meta (Mac에서 meta는 command key, Window에서 meta는 윈도우키 입니다, 특정 키보드에서 조금 다를수 있음)
.exact 수식어
.exact 수식어는 정확한 조합이 눌러야하는 것을 요구합니다.
마우스 버튼 수식어
- .left
- .rifgt
- .middle
'vue.js > Vue3 - 기본편' 카테고리의 다른 글
15. Watch, WatchEffect (0) | 2024.01.28 |
---|---|
14. 양방향 바인딩 v-model | v-model 수식어 (0) | 2024.01.27 |
12. 디렉티브 (v-text, v-cloak, v-once, v-memo) | 디렉티브 구성 (0) | 2024.01.21 |
11. 목록 렌더링 (v-for) (0) | 2024.01.21 |
10. 조건부 렌더링 (v-if, v-else, v-else-if, v-show, v-if 와 v-for) (0) | 2024.01.21 |