자바스크립트 이벤트 객체

공부한 이유

사용자가 키보드를 눌렀을 때 특정 코드를 실행시키고 싶어 아래와 같이 작성했다.

그런데 작성하면서도 이벤트 리스너의 콜백 함수로 event라는 매개 변수가 들어가는데, 무엇을 의미하는지 알지 못하고 그냥 외워서 사용했다.

이것 말고도 이 event 객체는 부트캠프에서 두 번이나 썼다. 리로드 되는 페이지에서 버튼에 달린 이벤트 리스너가 풀리는 것을 방지하기 위해 리로드 되지 않는 상위 부모 태그에 이벤트 리스너를 다는 이벤트 위임을 할 때, 영화 카드를 눌렀을 때 현재 누른 카드의 ID 값을 찾아올 때.

document.addEventListener('keydown', function(event) {
  // 13은 enter의 keyCode  
  if (event.keyCode === 13) {
        console.log('Enter 키가 눌렸습니다.');
    }
});

이벤트란?

이벤트는 웹 페이지에서 일어나는 action이라고 생각하면 될 듯하다. 예를 들어 마우스를 클릭하거나 키보드를 누르거나, 스크롤을 내리는 등.

브라우저는 웹 페이지에서 발생하는 이벤트에 대한 모든 정보를 event 객체에 담아서 이벤트 처리 함수에 전달한다. 따라서 어떤 이벤트가 발생했는지 알고 싶고, 그 정보로 다른 코드를 실행시키려면 event 객체를 받아와야 하는 것이다.

이벤트의 종류

이벤트	이벤트 이름	설명
마우스	click	마우스 클릭
	dbclik	더블 클릭
	mousedown	마우스를 누르는 그 순간
	mouseup	마우스를 누르고 있다가 떼는 그 순간
	mousemove	마우스를 움직일 때
	mouseover	마우스 포인터를 요소 위로 이동시켰을 때
	mouseout	마우스 포인터가 요소에서 벗어날 때
	mouseenter	마우스 포인터가 요소의 경계 안으로 들어올 때, 버블링 없음
	mouseleave	마우스 포인터가 요소 경계를 벗어날 때, 버블링 없음
키보드	keydown	키보드의 키를 누르고 있을 때
	keyup	키보드에서 키 뗄 때
	keypress	키가 눌리는 그 순간, 모던 브라우저에서 비권장하는 사항
폼 이벤트	submit	폼을 제출할 때
	change	입력 필드의 값이 변경될 때, 예를 들어 비밀번호 만들 때 'n자 이상으로 해주세요'
	focus	요소가 포커스를 받을 때, 즉 커서가 왔을 때
	input	입력 필드에서 데이터를 입력할 때 실시간으로 발생
UI 이벤트	load	페이지나 이미지가 완전히 로드 되었을 때
	unload	페이지가 언로드 될 때
	resize	브라우저 창의 크기가 변경될 때
	scroll	스크롤 바를 스크롤 할 때
자원 이벤트	DOMContentLoaded	HTML이 완전히 로드되고 파싱되었을 때, 스타일시트, 이미지 등은 안 기다림.
	load	페이지의 모든 의존 리소스(스타일시트, 스크립트, 이미지 등)이 로드되었을 때
드래그&드롭 이벤트	dragstart	요소를 드래그하기 시작할 때
	drag	드래그 하는 동안 지속적으로 발생
	dragenter	드래그 된 요소가 드롭 대상 위에 올라갔을 때
	dragleave	드래그 된 요소가 드롭 대상에서 벗어났을 때
	dragover	드래그 된 요소가 드롭 대상 위에 있을 때
	drop	드래그 된 요소가 드롭 대상 위에서 놓였을 때
	dragend	드래그 작업이 완료(드롭 후)됐을 때

이벤트 객체란?

위 처럼 여러가지 이벤트가 발생했을 때 상세 정보를 제공하는 객체.

event를 매개변수로 넣는 이유

• 이벤트 유형을 확인하기 위해 : event.type을 통해 어떤 종류의 이벤트가 발생했는지 알 수 있음. click, keydown 등.
• 이벤트 대상에 접근하기 위해 : event.target은 이벤트가 발생한 요소를 가리킴. 어떤 버튼을 클릭했는지, 어떤 입력 필드에서 키보드를 입력했는지 알아낼 수 있음.
• 기본 이벤트를 제어하기 위해 : event.preventDefault() 함수를 사용하면 웹 브라우저의 기본 동작을 막을 수 있음. 예를 들어 a태그에 href 속성을 사용하면 클릭했을 때 링크로 이동함. 그런데 이것은 이벤트 리스너를 달아서가 아니라 그냥 기본동작임. 이런 걸 못하게 막을 수 있음.
• 이벤트 전파 제어 : event.stopPropagetion() 함수를 사용하면 이벤트가 더 이상 전파되지 않도록 할 수 있음. 웹 페이지의 요소들은 부모, 자식 등 계층적 구조를 가지면서 이벤트를 전파시키는데 이를 막을 수 있음.