Event

About Event

'사건, 일'이라는 사전적 의미를 갖고 있는 Event란 무엇일까 ?
JavaScirpt에서의 event는 브라우저에서 발생된 특정 동작을 말한다. 주체자로 인해 브라우저에 발생한 모든 동작들을 event로 여길 수 있는데, 여기서 주체자는 꼭 유저일 필요는 없다. 예를들어 '브라우저의 크기가 늘어나고 줄어든다'던지, '페이지의 로딩이 끝난다'던지는 주체자가 브라우저 자신이다. 유저가 발생시키는 event를 예로 들자면 버튼 클릭, 키보드 입력, 마우스 휠 클릭과 같은 동작들이 있다. Front-end 개발자는 만든 웹이 client와 상호작용을 할 수 있도록 이벤트를 잘 다룰 수 있어야 한다.

Event Listener
발생하는 이벤트들을 감지하여 실행하는 함수를 '이벤트 리스너(Event Listener)' 또는 '이벤트 핸들러(Event Handler)' 라고 한다. Event Listener는 귀를 쫑긋 세우고 이벤트가 발생되기를 기다리고 있다가 event가 발생하는 그 시점에 특정 동작(프로그래머가 정해놓은)을 수행한다. 개발자는 '유저가 어떤 동작을 했을때 이러한 동작을 하겠다' 에 관한 함수를 작성해주면 된다.

예를 들면 유저가 'Like' 버튼을 누르면 화면에 '폭죽을 터트린다' 정도가 되겠다.

이벤트 리스너는 'on'의 키워드로 시작한다.

• onclick
• onblur
• onmouseover
• onfocus

이벤트 리스너는 이벤트 객체(event object)를 요소로(argument) 넘겨주는 역할을 한다.
_{* 이벤트 리스너가 많아질수록 page의 메모리를 많이 차지하게 된다. 이는 페이지의 응답성을 떨어트리게 만드니 이벤트 리스너를 남발하지 말고 개수를 제한하도록 하자 *}

Event object
Event object는 특정 이벤트에 관한 정보를 담고 있는 객체이다. 이 객체는 event가 발생했을시 동적으로 생성된다. Event Listener가 호출 될 때 이벤트 객체가 인수로 전달된다.

Evnet object안에는 어떠한 프로퍼티와 메서드가 담겨있을까?
그 종류는 아래와 같다.

Property | Method	Data Type	Info
bubble	boolean	Event가 bubbling 되는지 나타냄
cancelable	boolean	Event의 기본 동작을 cancel할 수 있는지 나타냄
currentTarge	element	Current event를 처리중인 요소
defaultPrevented	boolean	만약 true일 시 preventDefault() 가 호출되었다는 뜻
detail	integer	Event와 관련된 추가 정보
eventPhase	integer	Event Listener가 호출된 단계
preventDefault()	function	Event의 default로 설정되어 있는 행동을 제거함
stopImmediatePropagation()	function	Event capturing과 event bubbling 모두 취소시킴
target	element	Event target
trusted	boolean	true: 해당 이벤트가 browser에서 생성한 이벤트일 시    false: 개발자가 자체 제작한 이벤트 일 시
type	string	발생한 event type
view	AbsctractView	Event와 연결된 추상화된 view

  _{* Event handler 내부에서 this 객체는 언제나 currentTarget의 값과 일치한다.}

객체에 프로퍼티로 등록하기
객체에 프로퍼티로 등록하는 방법은 두 가지가 있다.

1. HTML : Tag 의 속성으로 등록

<img onmouseover="bigImg" onmouseout="smallImg" src="heartPumping.gif">

2. JavaScript : 코드를 통해 속성으로 등록
_{↳ 단점: Event 타입별로 하나의 Event Listener만 등록 가능}

window.addEventListener("click", () => {     console.log("Yo, what's up?");   });

Event 종류

Web browser에서 실행가능한 event 종류는 정말 다양하다. 모든 것을 다 다룰 수는 없으니 중요한 것들 위주로 살펴보려한다. 유저가 주로 사용하는 입력장치로는 키보드와 마우스가 있다.

마우스 이벤트

유저는 마우스의 left button , scroll wheel, right button 그리고 마우스를 움직여가며 컴퓨터에게 명령을 내린다. 우리는 마우스로 실행 될 수 있는 event 들이 무엇이며 그것을 event함수와 어떻게 연동시킬 것인지에 대해 알아볼 것이다.
  _{*아래 표의 기준은 기본세팅(오른손 잡이용) 기준입니다.}

Mouse Event	Info
click	왼쪽 버튼을 한번 누를 시 | Enter키를 누를 시 (키보드 지원)
dbclick	왼쪽 버튼을 두번 누를 시 | (키보드 비지원)
mousedown	버튼을 누르는 순간 | (키보드 비지원)
mouseenter	마우스 커서가 요소 밖에서 요소의 경계 안쪽으로 들어오는 순간 | (버블링 되지 않음)
mouseleave	마우스 커서가 요소 위에 있다가 요소 경계 밖으로 나가는 순간
mousemove	마우스 커서가 요소 주변을 이동하는 동안 | (키보드 비지원)
mouseout	마우스 커서가 요소 위에 있다가 다른 요소 위로 이동하는 순간 | (키보드 비지원)
mouseover	마우스 커서가 요소 밖에 있다가 요소 경계 안쪽으로 이동시 | (키보드 비지원)
mouseup	마우스 버튼을 누르고 있다가 놓는 순간 | (키보드 비지원)

   _{* mouseenter, mouseleave를 제외한 모든 마우스 이벤트는 버블링되어 올라간다.}

주의점 01 : 취소
모든 마우스 이벤트는 취소 가능하다. 취소시 주의할 점은 여러 이벤트들이 상호간에 영향을 주도록 연결되있을 수 있기 때문인데 특정 마우스 이벤트의 동작을 취소하게 되면 다른 이벤트에게도 영향을 미치게 된다. 이것을 늘 염두에 두고 취소를 진행하여야 한다.

예를 들자면 dbclick 이벤트 인데, 이 이벤트는 mousedown + mouseup의 이벤트가 연속으로 이루어져야만 발생하는 event이다. 위의 두 가지 event중 하나라도 취소하게 된다면 click event가 동작하지 않을 것이다.

마우스 더블클릭 이벤트는 늘 정해진 순서대로 동작한다.

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. click
7. doubleclick

주의점 02 : 키보드와의 연관성
몇몇의 마우스 이벤트는 키보드로도 동작시킬 수 있다. 이 뜻은 특정 키보드의 버튼사용으로 인해 마우스 이벤트에 영향을 줄 수 있다는 것이다.

주의점 03 : 접근성
Front-end 개발자는 유저가 사용할 수 있는 모든 기기를 염두에 두어야 한다. 유저는 컴퓨터나 스마트폰, 태블릿등 다양한 기기를 사용한다. 키보드나 마우스 없이 터치스크린을 사용하는 경우에도 이벤트가 동작할 수 있도록 해야 한다. 마우스 이벤트중에서 '키보드 비지원'하는 경우는 중요한 동작의 event로 사용하지 않는것이 좋다.
_{예를들자면 dbclick, mousedown과 같은 이벤트}

키보드 이벤트

유저가 키보드를 조작할때 발생하는 event들은 어떤 것이 있는지 알아보자.

Keyboard Event	Info
keydown	키를 처음 누르는 순간부터 손을 떼기 전까지
keypress	키를 누른 순간 문자가 입력 되었을 때부터 손을 떼기까지
keyup	키에서 손을 떼는 순간

이와같은 키보드 이벤트들은 text box에 가장 많이 쓰인다. 키보드 이벤트들도 마우스 이벤트 처럼 정해진 순서가 있는데 아래와 같다.

1. keydown
2. keypress
3. keyup

keydown 과 keypress 이벤트는 텍스트 박스에 글자가 나타가지 전에 발생. 그에 반해 keyup 이벤트는 텍스트 박스에 글자가 나타난 후에 발생한다.
글자가 아닌 키를 누르는 경우에는 keydown과 keyup 이벤트가 동시에 일어난다.
_{(글자가 아닌 키를 누르고 있는 동안 keydown + 글자가 아닌 키에서 손을 떼는 순간 keyup)}

키코드 keycode
키코드는 유저의 키 입력을 알 수 있도록 1:1로 대응시켜놓은 코드이다. 자주 쓰는 키 위주로만 살펴보자.

Keys	KeyCode	Keys	KeyCode
Enter	13	Backspace	8
Space	32	Shift	16
Control left	17	Alt	18
tab	9	Caps Lock	20
Escape	27	1	49
2	50	3	51
4	52	5	53
6	54	7	55
8	56	9	57
0	48	-	189

이 외의 키들에 관한 키코드가 더 궁금하다면 키코드 확인하기가 편하게 잘 되어있는 아래 링크에서 확인하길 바란다.
Keycode Info

_{이벤트에 관한 내용은 많은 관계로 추후 다른 포스트에서 focus 이벤트 및 이벤트 흐름에 대해 다뤄보도록 하겠다.}

Reference

• The Event Object
  
• JS Event
  
• 이벤트 리스너 등록
  
• Handling Events
  
• Document Object Model Events