JavaScript에서 Event 객체 작업 기본

이번 레슨에서는 Event 객체 작업의 기본을 배웁니다. 이 객체는 발생한 이벤트에 대한 정보를 포함하고 있습니다. 예를 들어, 요소를 클릭했을 때, 우리는 그 클릭의 좌표를 알 수 있고, 클릭 순간에 Ctrl, Alt 또는 Shift 키가 눌렸는지 등을 알 수 있습니다.

Event 객체를 얻는 방법을 살펴보겠습니다. 버튼이 있다고 가정해 봅시다:

<button id="elem">text</button>

이 버튼을 클릭했을 때 특정 함수가 실행된다고 가정해 봅시다:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {

});

바인딩된 함수 내부에는 이미 Event 객체가 있습니다 - 우리는 아직 그것을 얻는 방법을 모를 뿐입니다. 다음과 같이 얻을 수 있습니다: 우리 함수를 선언할 때 매개변수로 어떤 변수라도 전달해야 합니다 (일반적으로 event - 하지만 이름은 무엇이든 될 수 있음) 그리고 브라우저가 자동으로 이 변수에 Event 객체를 넣을 것입니다:

elem.addEventListener('click', function(event) {
	console.log(event); // 이벤트 객체를 볼 수 있음
});

설명된 조작을 직접 수행하고 콘솔에 이벤트 객체를 출력해 보세요. 이 객체의 구조를 연구하세요.