[JavaScript] 이벤트 - 이벤트 객체, this 키워드

이벤트 

 

이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미한다.

자바스크립트로 이벤트 종류에 따른 제어 작업을 할 수 있다.

 

1. 이벤트 종류

구분	이벤트	설명
마우스 이벤트	onclick	마우스로 클릭하면 발생한다.
	ondblclick	마우스로 빠르게 두 번 클릭하면 발생한다.
	onmouseover	마우스 포인터를 올리면 발생한다.
	onmouseout	마우스 포인터가 빠져나가면 발생한다.
	onmousemove	마우스 포인터가 움직이면 발생한다.
	onwheel	마우스 휠(wheel)을 움직이면 발생한다.
키보드 이벤트	onkeypress	키보드 버튼을 누르고 있는 동안 발생한다.
	onkeydown	키보드 버튼을 누른 순간 발생한다.
	onkeyup	키보드 버튼을 눌렀다가 뗀 순간 발생한다.
포커스 이벤트	onfocus	요소에 포커스가 되면 발생한다.
	onblur	요소가 포커스를 잃으면 발생한다.
폼 이벤트	onsubmit	폼이 전송될 때 발생한다.
리소스 이벤트	onload	웹 브라우저의 리소스 로드가 끝나면 발생한다.

 

2. 이벤트 등록

방법	설명
인라인 방식	HTML 태그에 속성으로 이벤트를 등록하는 방법
프로퍼티 리스너	요소 노드에 직접 속성으로 이벤트를 등록하는 방법
이벤트 등록 메서드	DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트를 등록하는 방법(권장) <노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);

 

*이벤트 등록 메서드

<button>클릭</button>
<script>
    const btnE1 = document.querySelector("button");
    btnE1.addEventListener("click", function() {
    	alert("button Click");
    });
</script>

 

 

이벤트 객체

 

1. 이벤트 객체

이벤트 객체는 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어 있는 객체 집합이라고 생각하면 된다.

이벤트 객체는 개발자가 직접 생성하는 것이 아니라 이벤트가 발생하면 실행되는 함수의 매개변수로 같이 전달된다.

<button>클릭</button>
<script>
    const btnE1 = document.querySelector("button");
    btnE1.addEventListener("click", function(event) {
    	console.log(event);
    });
</script>

 

2. 이벤트 객체의 주요 속성

이벤트 객체	속성	설명
PointerEvent	clientX	마우스가 클릭된 x좌표(수평 스크롤 포함 X)
	clientY	마우스가 클릭된 y좌표(수직 스크롤 포함 X)
	pageX	마우스가 클릭된 x좌표(수평 스크롤 포함 O)
	pageY	마우스가 클릭된 y좌표(수직 스크롤 포함 O)
	screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
	screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표
KeyboardEvent	keyCode	키보드에서 눌린 키의 유니코드 값을 반환한다.
	ctrlKey	Ctrl 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다.
	altKey	Alt 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다.
	shiftKey	Shift 키가 눌렸으면 true, 그렇지 않으면 false를 반환한다.

 

3. 이벤트 취소

preventDefault() 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있다.

 

 

this 키워드

 

이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있다.

단, 화살표 함수일 때는 이벤트 객체의 target 속성으로 참조해야 한다.