[Vue.js] Vue 이벤트 핸들링 (Event Handling)

이벤트 핸들링 (Event Handling)

 

 

# 이벤트 리스닝

v-on 디렉티브는 단축 문법으로 @ 기호를 사용, DOM 이벤트를 수신하고 트리거될 때, 사전 정의된 코드를 실행.

주요 문법은, v-on:click="handler" ( = @click="handler")

 

# 인라인 핸들러 (Inline Handlers)​

<script>
  export default{
    data() {
      return {
        count: 0
      }
    }
  }
</script>

<template>
    <h2>인라인 핸들러</h2>
    <button @click="count++">1추가</button>
    <p>숫자 값: {{ count }}</p>
</template>

 

 

# 메서드 핸들러 (Method Handlers)​

<script>
  export default{
    methods: {
    greet(event) {
      // `this`는 메서드가 활성화된 현재 인스턴스
      alert(`안녕 ${this.name}!`)
      // 'event'는 네이티브 DOM 이벤트 객체입니다.
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}
</script>

<template>
  <h2>메서드 핸들러</h2>
  <button @click="greet">환영하기</button>
</template>

 

 

# 인라인 핸들러에서 메서드 호출

메서드 이름을 직접 바인딩하는 대신, 인라인 핸들러에서 메서드를 호출 가능.

(사용자 지정 인자를 메서드에 전달)

<script>
  export default{
    say(message) {
      alert(message)
    }
	}
</script>

<template>
  <h2>인라인 핸들러에서 메서드 호출하기</h2>
  <button @click="say('안녕')">안녕이라고 말하기</button>
  <button @click="say('잘가')">잘가라고 말하기</button>
</template>

 

 

# 인라인 핸들러에서 이벤트 객체 접근

인라인 핸들러에서 네이티브 DOM 이벤트 객체에 접근 시, $event를 사용하여 메서드에 전달하거나 인라인 화살표 함수 사용.

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` is the native DOM event
  if (event) {
    alert(event.target.tagName)
  }
}

<h2>인라인 핸들러에서 이벤트 객체 접근하기</h2>
<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
  제출하기
</button>

<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
  제출하기
</button>

 

 

# 이벤트 수식어

이벤트 핸들러에서 event.preventDefault() 또는 event.stopPropagation()은 흔히 사용하며, 

메서드에서 이 작업을 쉽게할 수 있지만, 메서드가 DOM 이벤트에 대한 세부적인 처리 없이, 데이터 처리 로직만 있다면

코드 유지보수에 더 좋을 것입니다.
이 문제를 해결하기 위해 v-on은 점(.)으로 시작하는 지시적 접미사인 이벤트 수식어를 제공합니다.

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- click 이벤트가 부모에게 전파x (버블링x) -->
<a @click.stop="doThis" href="https://www.naver.com/" target="_blank">doThis</a>

<!-- submit 이벤트가 더 이상 페이지 리로드 x -->
<form @submit.prevent="onSubmit" action="https://www.naver.com/">
  <button>제출</button>
</form>

<!-- 수식어 연결 가능 -->
<a @click.stop.prevent="doThat"  href="https://www.naver.com/" target="_blank">doThat</a>

<!-- 이벤트 핸들러 없이 수식어만 사용 가능 -->
<form @submit.prevent action="https://www.naver.com/">
  <button>제출</button>
</form>

<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행됩니다. -->
<!-- 예를 들어 자식 엘리먼트에서 클릭 액션이 있으면 핸들러가 실행되지 않습니다. -->
<div @click="boxClick" class="box">
  <span @click="spanClick" class="box">click</span>
</div>
<!-- boxClick, spanClick 모두 실행 -->
<div @click.self="boxClick" class="box">
  <span @click.self="spanClick" class="box">click</span>
<!-- spanClick만 실행 -->
</div>

# event.preventDefault() 와 event.stopPropagation() 의 차이

event.preventDefault()

event.preventDefault() 메서드는 그 요소의 이벤트의 기본 동작 중지. → 상위 요소들로 이벤트 전달

일반적으로 링크 클릭, 폼 제출, 키보드 입력 등과 같은 HTML 요소의 기본 동작을 막기 위해 사용.

 

event.stopPropagation():

event.stopPropagation() 메서드는 이벤트의 버블링(bubbling) 단계를 중지시키는 데 사용. → 상위 요소들로의 이벤트 중단

(버블링은 이벤트가 DOM 요소에서 상위 요소로 전파되는 것)

참고 코드펜 : https://codepen.io/lhxiifbi-the-scripter/pen/PoVqzoV