Vue(version 3) 주요 기능 정리(v-on) #7

주요 기능 정리 #6에서는 select 컴포넌트 일 때 v-model을 사용했을 경우에 대해서 알아봤다.
이번 주제는 v-on에 대해서 알아보고자 한다.

v-on은 이벤트를 받을 때 사용한다. 유저가 클릭했을 때, 어떤 값을 입력했을 때, 마우스를 이동했을 때 등등 여러 이벤트에서 사용한다. 기본 이벤트는 아래와 같다.

<!-- method handler -->

<button v-on:click="doThis"></button>

<button @click.stop.prevent="doThis"></button>

v-on은 @로 축약해서 사용한다. click 이벤트는 위와 같이 stop prevent와 사용하는데, 이 이벤트는 자바 스크립트의 event.stopPropagation(); event.preventDefault(); 와 같은 기능이다. stop prevent에 대해서 간단히 설명하자면 Html의 구조상 부모와 자식의 관계로 사용하고 있는데, 부모 Element에 이벤트를 전달하지 않는 기능이라고 생각하면 된다.

<!-- inline statement -->

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

<!-- key modifier using keyAlias -->

<input @keyup.enter="onEnter" />

<!-- object syntax -->

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

1번째 예제는 $event로 자바스크립트에서 사용하던 이벤트를 받을 수 있다는 예제이다.
2번째 예제는 keyup에 대한 이벤트이며, enter는 엔터키를 입력 받았을 경우에 이벤트가 발생한다는 예제이다. 그래서 @keyup.enter 로 사용하면 엔터키가 올라올 때 이벤트만 잡는다는 의미이다.
3번째 예제는 object로 이벤트를 등록할 수있다는 예제이다. 대부분 이렇게 사용하지는 않는다.

<script setup lang="ts">

// vue Element 기본 이벤트

export interface Events {

    onCopy: ClipboardEvent;

    onCut: ClipboardEvent;

    onPaste: ClipboardEvent;

    onCompositionend: CompositionEvent;

    onCompositionstart: CompositionEvent;

    onCompositionupdate: CompositionEvent;

    onDrag: DragEvent;

    onDragend: DragEvent;

    onDragenter: DragEvent;

    onDragexit: DragEvent;

    onDragleave: DragEvent;

    onDragover: DragEvent;

    onDragstart: DragEvent;

    onDrop: DragEvent;

    onFocus: FocusEvent;

    onFocusin: FocusEvent;

    onFocusout: FocusEvent;

    onBlur: FocusEvent;

    onChange: Event;

    onBeforeinput: Event;

    onInput: Event;

    onReset: Event;

    onSubmit: Event;

    onInvalid: Event;

    onLoad: Event;

    onError: Event;

    onKeydown: KeyboardEvent;

    onKeypress: KeyboardEvent;

    onKeyup: KeyboardEvent;

    onAuxclick: MouseEvent;

    onClick: MouseEvent;

    onContextmenu: MouseEvent;

    onDblclick: MouseEvent;

    onMousedown: MouseEvent;

    onMouseenter: MouseEvent;

    onMouseleave: MouseEvent;

    onMousemove: MouseEvent;

    onMouseout: MouseEvent;

    onMouseover: MouseEvent;

    onMouseup: MouseEvent;

    onAbort: Event;

    onCanplay: Event;

    onCanplaythrough: Event;

    onDurationchange: Event;

    onEmptied: Event;

    onEncrypted: Event;

    onEnded: Event;

    onLoadeddata: Event;

    onLoadedmetadata: Event;

    onLoadstart: Event;

    onPause: Event;

    onPlay: Event;

    onPlaying: Event;

    onProgress: Event;

    onRatechange: Event;

    onSeeked: Event;

    onSeeking: Event;

    onStalled: Event;

    onSuspend: Event;

    onTimeupdate: Event;

    onVolumechange: Event;

    onWaiting: Event;

    onSelect: Event;

    onScroll: UIEvent;

    onTouchcancel: TouchEvent;

    onTouchend: TouchEvent;

    onTouchmove: TouchEvent;

    onTouchstart: TouchEvent;

    onPointerdown: PointerEvent;

    onPointermove: PointerEvent;

    onPointerup: PointerEvent;

    onPointercancel: PointerEvent;

    onPointerenter: PointerEvent;

    onPointerleave: PointerEvent;

    onPointerover: PointerEvent;

    onPointerout: PointerEvent;

    onWheel: WheelEvent;

    onAnimationstart: AnimationEvent;

    onAnimationend: AnimationEvent;

    onAnimationiteration: AnimationEvent;

    onTransitionend: TransitionEvent;

    onTransitionstart: TransitionEvent;

}

</script>

위 인터페이스는 vue core에 지정되어 있는 타입들이며, Element 기본 이벤트라고 생각하시면 된다.다음화에서는 이 이벤트를 custom으로 사용하는 예제를 소개해 보고자 한다.