13. 이벤트 처리 | 이벤트 수식어 | 키 수식어

이벤트 처리는 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