Event 의 모든것 : 너무나 많은 이벤트들..

 

< 공식 문서>

 

Event Reference (반드시 읽어볼것!)

Lee : 추후 이 포스팅은 계속 업데이트되어야합니다. (현재 2020.11.25)

위의 공식문서를 보면, 이벤트가 너무너무 많다. (넉넉잡아 1000개 정도?)

문서를 보며 중요한 부분을 찾아 정리하도록 하자.

---

< Event 란 ? >

사용자의 마우스나 키보드로부터 오는 입력을 Event 라고한다.

하지만 마우스만이 이벤트는 아니다. 

창을 닫는것도, 창을 여는것도, 동영상 재생을 시작하는것도 이벤트다.

우리는 이 이벤트 가 발생했을때 특정 기능을 수행하기를 원한다.

이는 다시 말해 나의 함수가 호출되기를 원한다.

---

< Event 가 발생하면 나의 함수를 호출해줘! > 

Vue 는 놀라울만큼 직관적이다.

아래와 같이 작성할수있다.

<아무태그 @이벤트명="나의함수명()" />

아래는 click 이벤트를 mouseClick 이라는 내가 정의한 함수에 연결하였다.

<!-- App.vue -->

<template>

  <button @click="mouseClick">Click me</button>

</template>

<script>

  export default {
    
    setup() {

      function mouseClick() {}

      return { mouseClick }

    }

  }

</script>

위의 mouseClick 함수는 button 태그에서 click 이 발생할때마다 호출되는것이다.

물론 button 태그뿐만 아니라 어떠한 태그든 @ 지시어는 사용될수있다.

<div @click="mouseClick"></div>

 

상황에 따라, 마우스가 클릭된 x,y 좌표등을 알고싶을수있다.

이럴때는 함수에 하나의 인자를 추가해주면,

이벤트가 발생했을때 해당 이벤트의 정보가 넘어온다.

function mouseClick(e) { return e }

주의 : Vue 에서는 지역변수가 사용되지않았을때 컴파일 에러가 난다.

위에서 e 를 사용하지않으면 error 다.

---

< Event 의 종류 모두 보기 >

우리가 생각하는 이벤트는 마우스나, 키보드정도겠지만

실제로는 매우 많은 종류의 이벤트가 있다.

또한 각 이벤트가 발생했을때 해당 함수의 인자로 넘겨지는 이벤트의 정보도 다르다.

존재하는 모든 이벤트와, 공식문서 링크를 첨부하겠다.

---

< MouseEvent >

click       : (좌) mousedown 과 mouseup 이 모두 발생한뒤, 커서가 요소에 속하면 호출.
contextmenu : (우) 마우스 우클릭후 호출.
dblclick    : (좌) 짧게 2번의 mousedown, mouseup 이 모두 발생한뒤 호출.
mouseup     : (좌, 우) 마우스 버튼이 손에서 때지고, 커서가 해당 요소에 속하면 호출.
mousedown   : (좌, 우) 마우스 버튼이 눌려진 순간 호출.
mouseenter  : 커서가 해당 요소에 진입한 순간 호출.  주의) 버튼 눌려진 여부 상관안함.
mouseleave  : 커서가 해당 요소를 벗어난 순간 호출.  주의) 버튼 눌려진 여부 상관안함.
mousemove   : 커서가 해당 요소안에서 움직인 순간 호출. 주의) 버튼 눌려진 여부 상관안함.
mouseout    : mouseleave 와 유사하나, 버블링됨. 주의) 버튼 눌려진 여부 상관안함.
mouseover   : mouseenter 와 유사하나, event 를 걸지않은 자식 요소에 진입해도 호출. 주의) 버튼 눌려진 여부 상관안함.

 

Lee) 몇몇 이벤트는 자식 요소에 작동되어도, 호출된다고 한다.

추후 더 찾아보고 마저 여기에 정리할것..

---

< DragEvent >

drag
dragend
dragenter
dragleave
dragover
dragstart
drop

DragEvent 의 DataTransfer 라는 

객체가 있는데, 이 객체를 사용하여 미디 파일을 DAW 로 drop 할수있을듯하다.

추후 검색할것..

---

< WheelEvent >

wheel : 마우스 휠을 움직인 순간 호출.

---

< Event >

scroll

---

< KeyboardEvent >

keydown     : 키보드가 눌렸을때 호출. 주의) <input> <textarea> 또는 contentEnditable 속성일때만 호출.
keyup       : 키보드가 때졌을때 호출.

---

< 기타 Event 들.. >

abort 
blur
canplay
canplaythrough
change
durationchange
emptied
ended
error
focus
formchange
forminput
input
invalid
load
loadeddata
loadedmetadata
loadstart
pause
play
playing
progress
ratechange
readystatechange
reset
resize
seeked
seeking
select
show
stalled
submit
suspend
timeupdate
volumechange
waiting

---