[JavaScript] 이벤트와 이벤트 처리기

 

 

 

▶︎ 이벤트

 

🍘  자바스크립트에서 이벤트란?

 

이벤트(event)는 웹 브라우저나 사용자가 실행하는 어떤 동작

 

- 클릭하거나 마우스를 올리는 등의 모든 동작

- 웹 브라우저에서 일어난 모든 동작이 이벤트가 되진 않고 해당 웹 문서 영역에서 이루어지는 동작만

 

 

🍏 문서 로딩 이벤트

 

이벤트	이벤트가 발생하는 순간
abort	웹 문서가 완전히 로딩하기 전에 불러오기를 멈추었을 때
error	문서가 정확히 로딩되지 않았을 때
load	문서 로딩이 끝났을 때
resize	문서 화면의 크기가 바뀌었을 때
scroll	문서 화면이 스크롤 되었을 때
unload	문서를 벗어날 때

 

 

🍏 마우스 이벤트

 

이벤트	이벤트가 발생하는 순간
click	요소를 클릭했을 때
dblclick	더블클릭했을 때
mousedown	마우스 버튼을 눌렀을 때
mousemove	마우스 포인터를 움직일 때
mouseover	마우스 포인터를 요소 위로 옮길 때
mouseout	마우스 포인터가 요소를 벗어날 때
mouseup	요소 위에 올려놓은 마우스 버튼에서 손을 뗄 때

 

 

🍏 키보드 이벤트

 

이벤트	이벤트가 발생하는 순간
keydown	키를 누르는 동안
keypress	키를 눌렀을 때
keyup	키에서 손을 뗄 때

 

 

🍏 폼(form) 이벤트

 

이벤트	이벤트가 발생하는 순간
blur	폼 요소에 포커스를 잃었을 때
change	목록이나 체크 상태 등이 변경되었을 때 (input, select, textarea 태그에서 사용)
focus	폼 요소에 포커스를 놓았을 때 (label, select, textarea, button 태그에서 사용)
reset	폼이 리셋되었을 때
submit	submit 버튼을 클릭했을 때

 

 

▶︎ 이벤트 처리하기

 

이벤트를 처리하는 것을 '이벤트 처리기' 또는 '이벤트 핸들러' 라고 함

 

🍏 HTML 태그에 함수 연결하기

HTML 태그에 'on이벤트명' 으로 직접 함수를 연결할 수 있음

<태그 on이벤트명="함수명">

이 방법은 함수에 변경 내용이 있으면 HTML 소스도 함께 수정해야 해서 스크립트 파일에서 이벤트 처리하는 방법을 많이 사용

 

🍏 웹 요소에 함수 연결하기

 

요소.on이벤트명 = 함수

이 방법을 이용해서 하나의 이벤트에 두가지 이상의 함수를 실행할 경우 가장 마지막에 사용한 것만 적용되서 문제

 

 

🍏 이벤트 리스너로 이벤트 처리하기

 

addEventListner() 메서드를 사용해서 이벤트 처리하는 방식을 많이 사용함

요소.addEventListner(이벤트, 함수, 캡처 여부);

- 이벤트 : 이벤트 명엔 on을 붙이지 않고 'click' 처럼 이벤트 이름 그대로 사용

- 함수 : 익명함수를 사용해서 직접 작성해도 되고 호출해도됨 (호출할 경우 괄호 붙이면 안됨!)

- 캡처 여부 : true면 캡처링을, false이면 버블링을 한다는 의미, 대부분 기본값인 false 그대로 둠

 

 

▶︎ event 객체

 

웹 문서에 발생하는 이벤트 정보를 저장하는 event 객체가 있다.

 

🍘 event 객체의 프로퍼티와 메서드

 

event 객체는 이벤트 이름, 발생위치, 발생시간 등 이벤트와 관련된 다양한 정보가 포함되어 있다.

event 객체에서 사용할 수 있는 메서드는 preventDefault() 뿐임

 

🍏 event 객체의 주요 프로퍼티

 

프로퍼티	기능
button	마우스 키값을 반환한다
clientX / clientY	이벤트가 발생한 가로 / 세로 위치를 반환한다
pageX / pageY	현재 문서를 기준으로 이벤트가 발생한 가로 / 세로 위치를 반환한다
target	이벤트가 발생한 대상을 반환한다
timeStamp	이벤트가 발생한 시간을 밀리초 단위로 반환한다
altKey / shiftKey / ctrlKey	이벤트가 발생할 때 alt / shift / ctrl 키를 누르고 있었는지의 여부를 불리언 값으로 반환한다
type	발생한 이벤트 이름을 반환한다
which	키보드와 관련된 이벤트가 발생했을 때 키의 유니코드 값을 반환한다

 

※ 전체 프로퍼티 목록 링크

 

event 객체 프로퍼티 사용 예시

const box = document.querySelector("#box");

box.addEventListner("click", (e) => {
	alert(`이벤트 발생 위치 : ${e.pageX}, ${e.pageY}`);
});

pageX와 pageY라는 프로퍼티를 사용해서 이벤트 객체의 위치를 알 수 있다.

 

웹 문서에서 마우스 오른쪽 버튼 비활성화하기

window.addEventListner("contextmenu", e => {
	e.preventDefault();
	alert("오른쪽 버튼을 사용할 수 없습니다");
});

마우스 오른쪽 버튼을 클릭하면 나오는 바로가기 메뉴를 콘텍스트 메뉴(context menu)라고 한다.

웹에서 마우스 오른쪽 버튼을 사용하지 못하게 할 때 위와 같이 많이 사용한다.

 

 

▶︎ 이벤트 전파

 

이벤트가 발생할 때 그 부모 요소에도, 부모의 부모요소에도 똑같이 이벤트가 처리되는데, 이것을 "이벤트 전파(event propagation)"이라고 한다.

 

 

🍘 이벤트 버블링

 

특정 요소에서 이벤트가 발생 -> 그 요소의 부모 요소 -> 부모 요소의 부모 요소

이런식으로 부모요소에도 이벤트가 발생한것으로 간주되어 전파되는 것을 이벤트 버블링이라고 한다.

웹 브라우저 상의 대부분의 이벤트는 이벤트 버블링 된다.

 

 

🍏 event.target과 event.currentTarget

 

event 객체의 프로퍼티 중에 target과 currentTarget 프로퍼티가 있는데 target은 이벤트가 발생한 맨 처음 요소를 가리키고  currentTarget은 이벤트가 전파되면서 현재 이벤트 처리기가 실행되는 대상을 가리킨다.

 

 

🍘 이벤트 캡처링

 

이벤트 캡처링은 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식이다.

버블링이 아래에서 위로(자식에서 부모로) 전파된다면 캡처링은 위에서 아래로(부모에서 자식으로) 전파된다.

이벤트 리스너에 세번째 옵션에 true를 사용하면 캡처링 방식으로 전파된다.