이벤트 드리븐 프로그래밍 / 자주 쓰는 이벤트 타입

우리는 자바스크립트를 이용해 함수를 작성할 수 있고, 로직을 짜서 내 의도에 맞게 동작시킬 수 있다.

 

이때 내 의도가 '사용자가 어떤 부분을 클릭하거나, 화면을 줄이거나 하는 등의 이벤트'가 생길 때

내가 구성했던 로직이 실행이 되길 원하는 것이었다면?

 

그런 행위를 가능하게 해주는 것이 이벤트 드리븐 프로그래밍이다.

 

이벤트 드리븐 프로그래밍

앞서 설명했듯, 이벤트 드리븐 프로그래밍은 어떤 이벤트가 생겼을 때,

로직이 실행되도록 만들어주는 프로그래밍 기법이다.

즉, 이벤트 드리븐 프로그래밍은 '내 로직의 실행 여부를 브라우저에게 위임'하는 것으로 정의할 수 있다.

1. 무언가 클릭을 했을 때 내가 만든 로직이 실행되었으면 좋겠다 -> 이벤트 드리븐 프로그래밍
2. 설문을 입력하고 엔터를 눌렀을 때, 입력정보가 서버로 전달되었으면 좋겠다 -> 이벤트 드리븐 프로그래밍

브라우저로 어떤 조작을 가했을 때, 내가 설정한 로직이 실행되게 하는 것!

그것이 '이벤트 드리븐 프로그래밍'이다.

 

---

그렇다면,

어떤 이벤트가 있는 지 알아야

이벤트 드리븐 프로그래밍을 제대로 할 수 있을 것이다.

그래서 우리는 이벤트 타입에 대해 조금은 알고있어야 한다.

 

이벤트의 종류는 200가지가 넘는다고 하지만

사용하는 것은 대부분 한정되어있다.

 

아래는 자주 쓰인다고하는 이벤트 타입들을 정리한 것이다.

 

---

자주 쓰는 이벤트 타입

 

마우스 이벤트

이벤트 타입	이벤트 발생 시점
click	마우스 버튼을 클릭했을 때
dblclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 눌렀을 때
mouseup	누르고 있던 마우스 버튼을 놓았을 때
mousemove	마우스 커서를 움직였을 때
mouseenter	마우스 커서를 HTML 요소 안으로 이동했을 때(버블링 X)
mouseover	마우스 커서를 HTML 요소 안으로 이동했을 떄(버블링 O)
mouseleave	마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링 X)
mouseout	마우스 커서를 HTML 요소 밖으로 이동했을 떄(버블링 O)

 

키보드 이벤트

이벤트 타입	이벤트 발생 시점
keydown	모든 키를 눌렀을 때 발생하며, 문자, 숫자, 특수 문자, enter를 눌렀을 때는 누르고 있을때 연속적으로 이벤트가 발생하고, 그 외 (control, option, shift, tab, delete, 방향키 등)는 뗏을 때 한번의 이벤트만 발생함.
keyup	모든 키를 눌렀을때 발생하며, 누르고 있는 키를 놓았을 때 한번만 발생함.

 

포커스 이벤트

이벤트 타입	이벤트 발생 시점
focus	HTML 요소가 포커스를 받았을 때(버블링 X)
blur	HTML 요소가 포커스를 잃었을 때(버블링 X)
focusin	HTML 요소가 포커스를 받았을 때(버블링 O)
focusout	HTML 요소가 포커스를 잃었을 때(버블링 O)

 

값 변경 이벤트

이벤트 타입	이벤트 발생 시점
input	input(text, checkbox, radio), select, textarea 요소의 값이 입력되었을 때
change	input(text, checkbox, radio), select, textarea 요소의 값이 변경되었을 때 ※ change 이벤트는 input 이벤트와는 달리, HTML 요소가 포커스를 잃었을 때 사용자 입력이 종료되었다고 인식해서 이벤트가 발생한다. 즉, 사용자가 입력을 하고 있을때는 input이 적용되고, 입력이 종료되어 값이 변경되면 change 이벤트가 발생한다.