Event란?
Event는 별거 없고, 웹이나 앱에서 발생하는 어떤 상황이나 사건을 의미한다. 예를 들어, 버튼을 클릭하거나, 스크롤을 내리거나, 키보드를 누르는 등의 상황이다. (대단한 사건이나 상황이 아니다.)
브라우저는 이런 Event가 발생하면 잘 보고 있다가 Event에 대한 정보를 알려준다
const loginBtn = document.querySelector(".login");
loginBtn.addEventListener("click", (e) => {
console.log(`${e.target.textNode} 이 클릭됐어요`);
});login class가 부여된 노드를 찾아서, click 이벤트가 발생하면, 콜백함수를 실행시킨다. 이때, 콜백함수의 첫번째 인자로 Event 객체를 전달한다. 이 객체에는 이벤트에 대한 정보가 담겨있다. 이를 통해, 이벤트가 발생한 노드, 이벤트가 발생한 위치, 이벤트가 발생한 시간 등의 정보를 알 수 있다.
JavaScript를 이용한 개발은 event-driven개발이라고도 한다. 대부분의 인터렉티브한 기능들이 이벤트 들이다. 브라우저는 scroll, resize, form전송과 같은 기본 이벤트를 지원한다. 개발자가 원하는 이벤트를 등록해서 인터랙티브한 웹을 만드는 것이 가능하다. 이벤트 등록과 동작방식에 대한 이해는 웹프론트엔드 개발에 생명력을 불어넣는 방법에 대한 이해라고 할 수 있다.
이벤트 등록
어떤 이벤트가 발생했을 때 내가 원하는 동작을 실행시키기 위해 이벤트를 등록한다. 실행 할 함수를 정의 하고 원하는 이벤트에 대한 핸들러를 연결하여 이벤트를 등록한다. 이를 통해 웹 페이지나 애플리케이션은 사용자 상호작용에 반응하거나 시스템 이벤트를 처리할 수 있다.
// 1. 이벤트 대상 선택
var buttonElement = document.getElementById("myButton");
// 2. 이벤트 핸들러 함수 정의
function handleClickEvent() {
alert("버튼이 클릭되었습니다!");
}
// 3. 이벤트 핸들러 연결
buttonElement.addEventListener("click", handleClickEvent);이벤트 객체
이벤트가 발생했을 때, 이벤트에 대한 정보를 담고있는 객체를 이벤트 객체라고 한다. 이벤트 객체는 이벤트 핸들러(이벤트가 발생했을 때 실행되는 함수) 내에서 사용되며, 해당 이벤트에 대한 세부 정보를 액세스하고 조작하는 데 사용된다.
일반적으로 이벤트 핸들러 함수는 첫 번째 매개변수로 이벤트 객체를 받는다. 이 객체에는 다양한 정보와 속성이 포함되어 있으며, 이벤트 유형에 따라 다를 수 있다.
var el = document.getElementById("outside");
el.addEventListener(
"click",
function (event) {
// 이벤트 객체
console.log(event.target);
console.log(event.target.nodeName);
},
false,
);가장 많이 쓰이는 속성은 target이며 해당 이벤트가 발생한 element를 의미한다. element도 객체임으로, 그 안에 class name이나 element가 가진 속성을 사용할 수 있다. 이벤트 등록은 DOM 의 element node라면 다 등록할 수 있다.
자주 쓰이는 이벤트 객체의 속성은 다음과 같다.
- target: 이벤트가 발생한 요소를 반환
- currentTarget: 이벤트 핸들러가 등록된 요소를 반환
- type: 이벤트의 유형을 나타내는 문자열 ("click", "keydown", "mouseover" )
- preventDefault(): 이벤트의 기본 동작을 중단
- timeStamp: 이벤트가 발생한 시간을 나타내는 정수값
- clientX, clientY: 브라우저 화면에서의 마우스 좌표
- pageX, pageY: 문서 전체에서의 마우스 좌표
- screenX, screenY: 모니터 화면에서의 마우스 좌표
