@focus, @blur 등 다양한 이벤트 사용방법

출처

vue @focus, @blur 예제

 

Vue.js의 이벤트 사용 방법 정리

 

 

이벤트 구현

Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다.
v-on은 줄여서 @로 대체할 수 있습니다.

이벤트명설명

click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	<Form>이 제출될 때 실행함
reset	<Form>이 재설정될 때 실행함
select	<select>의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

 

이벤트 수식어

Vue.js에서는 복잡한 javascript구현을 간단히 처리하기 위해서 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.

좋아요 버튼을 클릭하면 javascript가 <a>태그가 기본 수행하는 href="..." 이벤트를 중지시키고 

goodgood() 메서드만 호출합니다.

기본 수식어

수식어 명설명비고

.prevent	기본 이벤트의 자동 실행을 중단 시킴	preventDefault() 과 동일한 기능
.stop	이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단)	stopPropagation() 과 동일한 기능
.capture	포착 단계에서만 이벤트를 발생시킴	내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함
.self	발생 단계에서만 이벤트를 발생시킴	event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행안됨
.once	이벤트를 한번만 실행 시킴
.passive	기본 이벤트를 취소할 수 없게 함	있을지 모를 .preventDefault()를 실행 안되게 함.

 

키 수식어

키(Key)에 대한 수식어는 원래 숫자를 이용하는 것이였으나 사람이 숫자를 기억하기 힘들기 때문에 키값에 해당하는 수식어를 별도의 이름으로 지정하여 활용합니다.

 

1개 키 사용법
<input @click.enter="...">
<input @keyup.tab="...">
<input @keyup.space="...">

여러 키 사용법
<input @click.ctrl.enter="...">
<input @keyup.alt.23="...">
<input @keyup.shift.13="...">

키 수식어 명고유 키 값비고

.enter	13
.tab	9
.delete	8	“Delete” 와 “Backspace” 키 모두 해당
.esc	27
.space	32
.up	33
.down	34
.left	37
.right	39
.ctrl	17
.alt	18
.shift	16
.meta	매킨토시에서 command 키, Windows에서는 windows 키

그 외의 키들은 개별로 커스텀하게 제작하여 사용할 수 있습니다.

키 수식어

키(Key) 수식어 처럼 마우스 버튼에 대한 수식어도 아래와 같습니다.

키 수식어 명설명

.left	마우스 왼쪽 버튼 클릭
.right	마우스 오른쪽 버튼 클릭
.middle	마우스 가운데 휠 버튼 클릭

 

 

 

사용예

@focus

• 사용자가 해당 태그에 포커싱(클릭) 했을 때 실행
• @focus= **로 실행

@blur

• 사용자가 해당 태그에 포커싱(클릭) 잃었을 때 실행
• @blur= **로 실행

종합

아래 예제는 PhoneNumberInput이라는 곳에 사용자가 focus하면 focusOnMobile값이 true로 바뀌면서 툴팁 content가 보이고, blur할 경우 focusOnMobile값이 false로 바뀌면서 툴팁 content가 안보이는 예제입니다

<template>
  <el-tooltip
    v-model="focusOnMobile"
    manual
    effect="light"
    content="회원 앱과 연결되는 중요한 정보입니다. 신중히 입력해주세요."
    placement="top"
  />
 
  <PhoneNumberInput
    v-model="data.mobile"
    placeholder="휴대폰 번호"
    :type="showMobileInput ? 'text' : 'password'"
    :readonly="!showMobileInput"
    @focus="focusOnMobile = true"
    @blur="focusOnMobile = false"
  />
</template>
<script>
date() {
    return {
        focusOnMobile: false
        //focus되면 툴팁이 보이고, blur되면 툴팁이 안보인다
    }
}
</script>