728x90
반응형
HTML 요소 중에는 개발자가 이벤트를 명시적으로 연결하지 않았음에도 자동으로 동작하는 기능을 갖는 것들이 있음. 이런 기능을 우리는 **기본 이벤트(Default Event)**라고 부름. 기본 이벤트는 HTML 마크업만으로도 특정 동작을 수행하게 할 수 있음. 하지만 이 기본 동작이 때로는 원하지 않는 경우가 있을 수 있어, 이벤트 객체의 preventDefault() 메서드를 사용해 기본 이벤트를 중지할 수 있음.
대표적인 기본 이벤트 예시:
- <a> 요소: 클릭 시 **href**에 정의된 경로로 이동함.
- 마우스 오른쪽 클릭: 브라우저의 기본 컨텍스트 메뉴가 나타남.
- <form> 요소: submit 버튼 클릭 시, action 속성에 지정된 URL로 폼 데이터가 전송됨.
- <input> 요소: 사용자가 입력한 문자가 텍스트 박스에 바로 나타남.
이러한 기본 이벤트는 일반적으로 편리하지만, 특정 상황에서 제어가 필요할 수 있음. 예를 들어, 클릭했을 때 페이지 이동을 막거나, 마우스 오른쪽 클릭 시 컨텍스트 메뉴를 비활성화할 수 있음.
기본 이벤트 실행 중단 (preventDefault)
기본 이벤트를 중지시키기 위해서는 이벤트 객체의 preventDefault() 메서드를 호출함. 이를 통해, 요소의 기본 동작이 실행되지 않도록 할 수 있음. 다음 예제는 기본 이벤트를 중지하는 방법을 보여줌.
<body>
<div id="app">
<div @contextmenu="ctxStop" style="position:absolute; top:5px; right:5px; bottom:5px; left:5px;">
<a href="https://facebook.com" @click="confirmFB">페이스북</a>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
var vm = Vue.createApp({
name: "App",
methods: {
// 우클릭 시 컨텍스트 메뉴 방지
ctxStop(e) {
e.preventDefault(); // 기본 컨텍스트 메뉴 비활성화
},
// 페이스북 링크 클릭 시 이동 여부 확인
confirmFB(e) {
if (!confirm("페이스북으로 이동할까요?")) {
e.preventDefault(); // 사용자가 취소하면 기본 링크 이동 막기
}
}
}
}).mount("#app");
</script>
</body>코드 설명:
- @contextmenu="ctxStop":
- 사용자가 오른쪽 클릭(컨텍스트 메뉴 이벤트)을 했을 때 기본 컨텍스트 메뉴가 나타나지 않도록 **e.preventDefault()**를 호출함.
- 이는 커스텀 메뉴를 추가하고 싶을 때 유용함.
- @click="confirmFB":
- 페이스북 링크 클릭 시, 사용자에게 이동 여부를 묻는 확인창을 띄움.
- 사용자가 취소를 누르면 **e.preventDefault()**로 기본 동작(링크 이동)을 중지함.
Vue의 이벤트 수식어(Event Modifiers)
Vue.js에서는 기본 이벤트를 쉽게 제어할 수 있도록 이벤트 수식어를 제공함. 수식어를 사용하면 코드를 간결하게 만들 수 있음. preventDefault()를 직접 호출하는 대신, .prevent 수식어를 사용하여 동일한 기능을 구현할 수 있음.
수정된 예제 코드 (이벤트 수식어 사용)
<div id="app">
<div @contextmenu.prevent style="position:absolute; top:5px; right:5px; bottom:5px; left:5px;">
<a href="https://facebook.com" @click="confirmFB">페이스북</a>
</div>
</div>
- @contextmenu.prevent: 이 수식어를 사용하면 별도의 메서드에서 **e.preventDefault()**를 호출하지 않고, 자동으로 기본 동작을 중지할 수 있음.
- 페이스북 링크 클릭 시의 동작은 여전히 confirmFB 메서드로 처리하며, 조건에 따라 기본 이벤트를 제어함.
요약
- **기본 이벤트(Default Event)**는 HTML 요소에 미리 정의된 동작으로, 개발자가 명시적으로 처리하지 않아도 발생함. 대표적인 예로 <a> 태그 클릭 시 페이지 이동, <form> 제출 시 데이터 전송 등이 있음.
- preventDefault() 메서드를 사용하면 이러한 기본 동작을 중단시킬 수 있음.
- Vue.js에서는 기본 동작을 제어하기 위해 이벤트 수식어를 제공함. 이를 통해, 더 간결하게 기본 이벤트를 막을 수 있음 (예: .prevent).
- 하지만 조건에 따라 기본 이벤트를 중단할 필요가 있는 경우에는 여전히 preventDefault() 메서드를 직접 호출해야 함.
기본 이벤트 처리는 사용자 경험과 페이지 동작을 제어하는 데 중요한 부분이며, 이를 적절히 제어할 수 있어야 더 나은 웹 애플리케이션을 만들 수 있음.
728x90
반응형
'Web Development > vue' 카테고리의 다른 글
| [콜럼Vue스] 이벤트 수식어 (Once, 키코드, 마우스, exact ) (4) | 2024.10.08 |
|---|---|
| [콜럼Vue스] 이벤트 전파와 버블링 (0) | 2024.10.08 |
| [콜럼Vue스] 이벤트 객체 (2) | 2024.10.07 |
| [콜럼Vue스] 이벤트 핸들러 메서드 (0) | 2024.10.06 |
| [콜럼Vue스] 인라인 이벤트 처리 (0) | 2024.10.06 |