Vue.js 이벤트 핸들링, 이벤트 수식어, 키 수식어

 

 

🌲 click 이벤트

인수가 없을 때 아래와 같이 사용되지만 이는 인수가 생략된 형태로 vue에서 지원하는 문법이다. 

<button @click="handler">
  click!!
</button>

인수를 직접 넣으면 작동한다.

<button @click="handler('Hello')">
	click!
</button>

 

🌲메소드 이벤트 핸들링

로직을 @click에 바로 넣는 것이 아니라 메소드를 만들어 핸들링하는 것이 많은 양의 데이터를 처리하기에 용이하다.

 

 

🌳inline method handler

handler에 들어가는 인수(여기서는 event)는 클릭 이벤트가 발생했을 때 정보를 갖는 객체(mouse event)로 이곳에서 필요한 속성을 가져와 사용할 수 있다. 이 인수는 매개변수이기 때문에 다른 이름으로 변경이 가능하다.

<button @click="handler">
  click!!
</button>

methods: {
  handler(event) {
    console.log(event)
    console.log(event.target) // <button>click!!</button>
    console.log(event.target.textContent) // click!!
  }
}

 

🌳인라인 + 이벤트

인라인 이벤트 핸들러(인수사용)에 이벤트 핸들러를 함께 사용하는 방법

$를 붙인다.

<button @click="handler('hello', $event)">
  click!!
</button>

 

🌳Multiple event handlers

다중 메소드 핸들러를 사용할 때는 인수가 없어도 호출하겠다는 의미로 소괄호()를 명시해야 한다.

<button @click="handlerA(), handlerB()">
  click!!
</button>

methods: {
  handlerA(){로직},
  handlerB(){로직}
}

 

 

🌲Event Modifiers

이벤트 수식어

---

<a 
  href="https://www.naver.com"
  target="_blank"
  @click="handler">
Naver</a>

methods: {
  handler() {
    console.log('N')
  }
}

 

🌳prevent

 

HTML의 기본 동작을 방지하고 method만 실행하는 기능이다.

(Naver를 클릭했을 때 새창은 열리지 않으나 콘솔창에 N은 출력된다.)

 

mouseevent에서 사용할 수 있는 메소드

handler(e) {
  e.preventDefault()
}

vuejs 문법

@click.prevent="handler"

 

🌳once

(HTML은 동작하나) method를 한 번만 실행

(Naver는 클릭할 때마다 새 창이 나타나고 콘솔창에 N은 한 번만 출력된다.)

 

이벤트 수식어 체이닝

체이닝으로 사용 가능하며 html도 method도 한 번씩만 실행되는 결과를 출력한다.

@click.prevent.once="handler"

 

 

🌲이벤트 버블링, 캡쳐링

<div class="parent" @click="handlerA">
  <div class="child" @click="handlerB">
  </div>
</div>

 

🌳버블링

child를 포함하고 있는 상위의 영역에 영향을 주는 현상

=> child를 클릭했을 때, child->parent 순으로 클릭된다.

 

버블링을 방지하기 위하여  Vuejs에서는 stop이라는 수식어를 사용하며 이는 stopPropagation메소드와 동일한 기능을 한다.

handlerB(e) {
  e.stopPropagation()
}

@click.stop="handlerB"

=> child를 클릭해도 parent는 동작하지 않는다

 

🌳캡쳐링

버블링과 반대의 기능을 의도할 때 capture수식어를 이용한다. 상위 요소가 먼저 동작하고 하위 요소로 내려온다.

=> child를 클릭했을 때, parent->child 순으로 클릭된다.

@click.capture="handlerA"

캡쳐링 시 부모 요소에만 동작하려면?

@click.capture.stop="handlerA"

 

🌳self

target과 currenttarget이 동일할 때에만 동작되는 이벤트 수식어이다.

기본적으로 parent에만 클릭 이벤트가 있을 때, child를 선택하면 parent를 선택한 것과 동일하게 기능하는데 이를 방지할 때 사용한다.

@click.self="handlerA"

 

🌳passive

wheel이벤트가 동작할 때, 실제 화면에서 스크롤되는 것과 로직 처리를 독립시켜 화면에 부하가 되는 것을 막는다.

@wheel.passive="handler"

 

 

키 수식어

keydown

<input
  type="text"
  @keydown="handler" />

methods: {
  handler(e) {
    if(e.key === 'Enter'){
      console.log('Enter')
    }
  }
}

(마우스이벤트의 key속성이 Enter일 때 콘솔에 Enter를 출력하라.)

클릭이벤트가 갖고 있는 객체데이터에는 key속성이 있는데 input입력창에서 키보드를 누를 때마다 key속성값은 변화한다. 키보드에서 Enter키를 누르게 되면 key속성 역시 Enter로 변하는데 이것을 이용해 로직을 실행시키고자 하는 if문이다.

 

위 코드를 vuejs속성으로 간단히 표현할 수 있다. 이때 Enter는 케밥케이스(대쉬)로 명시해야 한다.

<input
  type="text"
  @keydown.enter="handler" />

keydown은 체이닝 형식으로도 사용가능하다. ctrl+a조합을 만들 때는 다음과 같이 사용한다.

<input
  type="text"
  @keydown.ctrl.a="handler" />