이벤트 청취
v-on
디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.
예제 :
결과 :
메소드 이벤트 핸들러
많은 이벤트 핸들러의 로직은 더 복잡할 것이므로, JavaScript를 v-on
속성 값으로 보관하는 것은 간단하지 않는다. 이 때문에 v-on
이 호출하고자 하는 메소드의 이름을 받는 이유.
예제 :
결과 :
인라인 메소드 핸들러
메소드 이름을 직접 바인딩 하는 대신 인라인 JavaScript 구문에 메소드를 사용할 수도 있다.
결과 :
때로 인라인 명령문 핸들러에서 원본 DOM 이벤트에 액세스 해야할 수도 있다. 특별한 $event
변수를 사용해 메소드에 전달할 수도 있다.
예제 :
!! 자바스크립트에서 이벤트 전파를 중단하는 4가지 방법
* event.preventDefault() : 현재 이벤트의 기본 동작을 중단한다.
* event.stopPropagation() : 현재 이벤트가 상위로 전파되지 않도록 중단한다.
* event.stopImmediatePropagation() : 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다.
* return false : jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고, jQuery를 사용하지 않을 때는 event.preventDefault()와 같다.
이벤트 수식어
이벤트 핸들러 내부에서 event.preventDefault()
또는 event.stopPropagation()
를 호출하는 것은 매우 보편적인 일이다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋을 것이다.
이 문제를 해결하기 위해, Vue는 v-on
이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 표시된 접미사.
.stop
.prevent
.capture
.self
.once
관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 `@click.prevent.self
를 사용하면 **모든 클릭**을 막을 수 있으며
@click.self.prevent`는 엘리먼트 자체에 대한 클릭만 방지합니다.
네이티브 DOM 이벤트에 독점적인 다른 수식어와 달리,.once
수식어는 컴포넌트 이벤트에서도 사용할 수 있다.
추가로, Vue는 .passive
수식어를 제공합니다. 특히 모바일 환경에서 성능향상에 도움이 된다.
예를 들어, 브라우저는 핸들러가 event.preventDefault()
를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤 한다. .passive
수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있다.
.passive
와 .prevent
를 함께 사용하지 마세요. 패시브 핸들러는 기본 이벤트를 막지 않는다.
키 수식어
키보드 이벤트를 청취할 때, 종종 공통 키 코드를 확인해야 한다. Vue는 키 이벤트를 수신할 때 v-on
에 대한 키 수식어를 추가할 수 있다.
keyCode
를 모두 기억하는 것은 힘들다. 그래서 Vue는 자주 사용하는 키의 알리아스를 제공한다.
키 수식어 별칭의 전체 목록.
.enter
.tab
.delete
(“Delete” 와 “Backspace” 키 모두를 캡처).esc
.space
.up
.down
.left
.right
또한 전역 config.keyCodes
객체를 통해 사용자 지정 키 수식어 별칭을 지정할 수 있다.
# 오토매틱 키 수식어
KeyboardEvent.key
를 통해 노출된 유효 키 이름을 수식어로 직접 사용할 수 있다.
위의 예제에서 핸들러는 $event.key === 'PageDown'
만 호출된다.
일부 키(
.esc
와 모든 화살표 키)는 IE9에서 일관성 없는key
값을 가지고 있다.IE9를 지원해야하는 경우 내장 알리아스가 선호된다.
시스템 수식어 키 목록
다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다.
.ctrl
.alt
.shift
.meta
예제 :
수식어 키는 일반 키와 다르며
keyup
이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 한다. 즉,keyup.ctrl
는ctrl
을 누른 상태에서 키를 놓으면 트리거된다.ctrl
키만 놓으면 트리거되지 않는다.
# .exact 수식어
.exact
수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야하는 것을 보여준다.
예제 :
# 마우스 버튼 수식어
.left
.right
.middle
위 수정자는 특정 마우스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한