event modifier: prevent vs self

🎯 Vue Event Modifiers 시각적 설명

1️⃣ .prevent - 기본 동작 방지

.prevent는 브라우저의 기본 동작을 막아요!
예: 링크 클릭 시 페이지 이동, 폼 제출, 우클릭 메뉴 등

<a @click.prevent="handleClick">링크</a>

❌ .prevent 없음

🔗

1

사용자가 링크 클릭

↓

2

핸들러 함수 실행

↓

3

페이지 이동 발생 🌐

✅ .prevent 사용

🔗

1

사용자가 링크 클릭

↓

2

핸들러 함수 실행

↓

3

페이지 이동 차단됨!

2️⃣ .self - 자기 자신만 반응

.self는 정확히 그 요소를 클릭했을 때만 핸들러가 실행돼요!
자식 요소에서 발생한 이벤트(버블링)는 무시해요.

<div @click.self="parentClick">부모</div>

❌ .self 없음 (버블링 O)

부모 요소

@click="parentClick"

자식 요소

👆 여기를 클릭!

✅ 부모 핸들러 실행됨!
(자식에서 이벤트가 버블링되어 올라옴)

✅ .self 사용 (자기만 반응)

부모 요소

@click.self="parentClick"

자식 요소

👆 여기를 클릭!

❌ 부모 핸들러 실행 안됨!
(부모 영역을 직접 클릭해야만 실행됨)

💡 핵심 차이점:
• .prevent: 이벤트는 정상 처리되지만 브라우저의 기본 동작만 막음
• .self: 브라우저 기본 동작과 무관하게 자기 자신에서 발생한 이벤트만 처리

이 글은 AI를 통해서 작성되었습니다.