Vue Event 학습정리

Vue.js 에서는 이벤트를 v-on 디렉티브를 사용해서 처리합니다.

v-on 을 줄여서 @ 로 사용할 수 있습니다

<button id="btnlike" v-on:click="like">좋아요</button>
<button id="btnlike" @click="like">좋아요</button>

이벤트명	설명
click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	<Form>이 제출될 때 실행함
reset	<Form>이 재설정될 때 실행함
select	<select>의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

web 의 이벤트 리스트

HTML Event Attributes

HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial. Below are the global event attributes that can be added to HTML elements to define event actions.

https://www.w3schools.com/tags/ref_eventattributes.asp

이벤트 수식어

Event Handling - Vue.js

Vue.js - The Progressive JavaScript Framework

https://vuejs.org/v2/guide/events.html#Event-Modifiers

.stop : 웹브라우저의 이벤트가 실행되고 부모 태그의 이벤트가 추가로 실행되는 것을 방지하는 용도

버튼1은 method2 가 실행되고 method1 이 실행됨

버튼2는 method2 만 실행됨

<div @click='method1' class='box'>
	<button type='button' @click='method2'>버튼1</button>
	<button type='button' @click.stop='method2'>버튼2</button>
</div>

.prevent : 웹브라우저에서 정의한 이벤트를 무시하고 .prevent 로 설정한 메소드만 실행됨

링크 대신 method1 만 실행됨

<a @click.prevent='method1' href='https://www.vuejs.org'>vuejs</a>

.capture : 내부 이벤트가 발생되는 것을 먼저 capture 해서 실행함

버튼 은 capture 한 method1 이 실행되고 method2 가 실행됨

<div @click.capture='method1' class='box'>
	<button type='button' @click='method2'>버튼</button>
</div>

.self : 자기 태그내의 이벤트만 수용하고 자식 태그의 이벤트가 실행시에는 실행되지 않는다

<div @click.self='method1' class='box'>
	<button type='button' @click='method2'>버튼1</button>
	<button type='button' @click='method2'>버튼2</button>
</div>

.once : 이벤트를 1번만 사용한다 (반복적인 실행을 막는다)

<div @click.once='method1' class='box'></div>

.passive

Uploaded by N2T