[CS] 이벤트에 대해

Gapus 2023. 11. 21. 08:00

이벤트

설명

이벤트는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 중요한 요소
이벤트는 사용자가 웹페이지에서 특정 행동을 취하면 발생
이벤트 처리를 잘 활용하면 사용자 친화적인 웹페이지를 만들 수 있다.
주로 JavaScript를 통해 처리되며, 특정 이벤트가 발생했을 때 실행되는
함수인 이벤트 핸들러 또는 이벤트 리스너를 등록하여 사용
이벤트 핸들러 예시

element.addEventListener('event', function);

/*
* 'click': 요소를 클릭했을 때 발생
* 'keydown': 키보드의 키를 눌렀을 때 발생
* 'load': 페이지 로딩이 완료되었을 때 발생
* 'mouseover': 마우스 포인터가 요소 위로 이동했을 때 발생
*/

이벤트를 사용하는 이유

사용자 행동에 대응

사용자가 버튼을 클릭하거나 입력하면 그에 따른 반응을 보여줄 수 있다.
예를 들어, "제출" 버튼을 클릭하면 데이터를 서버에 전송하고,
"취소" 버튼을 클릭하면 입력된 내용 초기화 할 수 있다.

동적인 UI 구현

사용자의 행동에 따라 UI를 변경 가능
예를 들어, 마우스를 가져다 대면 색상이 변경되거나,
클릭하면 새로운 창이 열리는 등의 효과 구현 가능

비동기 처리

이벤트를 사용하면 페이지의 새로고침 없이 서버로부터 데이터를 가져와 페이지에 반영 가능
이를 통해, 사용자 경험을 향상 가능

사용자 행동 추적

사용자가 어떤 요소를 클릭했는지, 어떤 페이지를 방문했는지 등의
정보를 추적하여 사용자 행동 분석에 활용 가능

장점과 단점

장점

사용자 경험 향상

이벤트를 활용하면 사용자의 동작에 따라 웹 페이지가 반응하므로 사용자 친화적인 웹 페이지를 만들 수 있다.
이를 통해 사용자 경험을 향상 가능

동적인 웹 페이지 구현

이벤트를 통해 웹 페이지의 요소를 동적으로 변경하거나,
새로운 데이터를 로드, 이를 통해 동적인 웹 페이지 구현 가능

비동기 처리 가능

이벤트를 사용하면 페이지의 새로고침 없이 서버로부터 데이터를 가져와 페이지에 반영 가능
이를 통해 페이지의 로딩 시간을 줄이고 사용자 경험을 향상 가능

사용자 행동 추적

이벤트를 통해 사용자가 어떤 요소를 클릭했는지, 어떤 페이지를
방문했는지 등의 정보를 추적하여 사용자 행동 분석에 활용 가능

단점

고드 복잡도 증가

이벤트 핸들러가 많아질수록 코드가 복잡해지고 관리하기 어려울 수 있다.
이를 해결하기 위해 이벤트 위임과 같은 기법을 사용하거나, 적절한 코드 구조를 설계하는 것이 중요

브라우저 호환성 문제

이벤트 처리 방식은 브라우저마다 약간씩 다를 수 있다.
이로 인해 동일한 이벤트가 다른 브라우저에서 다르게 작동할 수 있다.
이를 해결하기 위해 jQuery와 같은 라이브러리를 사용하거나, 브라우저 호환성을 고려한 코드 작성이 중요

메모리 누수 가능성

이벤트 핸들러를 제대로 제거하지 않으면 메모리 누수가 발생 가능
이벤트 핸들러를 더 이상 사용하지 않을 때는 반드시 제거

이벤트 종류

Mouse Events(마우스 이벤트)

종류

마우스 이벤트 종류	마우스 동작에 의해 발생하는 이벤트
click	사용자가 요소를 클릭했을 때 발생
dblclick	사용자가 요소를 더블 클릭했을 때 발생
mouseover	마우스 포인터가 요소 위로 이동했을 때 발생
mouseout	마우스 포인트가 요소 범위를 벗어났을 때 발생
mousemove	마우스 포인터가 요소 위에서 움직였을때 발생

예시

let elem = document.querySelector("#myElement");

// 마우스 클릭 이벤트
elem.addEventListener("click", function() {
  console.log("마우스 클릭 이벤트가 발생하였습니다.");
});

// 마우스 오버 이벤트
elem.addEventListener("mouseover", function() {
  console.log("마우스 오버 이벤트가 발생하였습니다.");
});

Keyboard Events(키보드 이벤트)

종류

키보드 이벤트 종류	키보드 동작에 의해 발생하는 이벤트
keydown	키보드의 키를 눌렀을 때 발생
keyup	키보드의 키를 눌렀다가 뗐을 때 발생
keypress	키보드의 키를 눌렀을 때 발생, keydown과 keyup 사이에 발생

예시

// 키보드 누름 이벤트
document.addEventListener("keydown", function(event) {
  console.log(`키 '${event.key}'가 눌렸습니다.`);
});

// 키보드 뗌 이벤트
document.addEventListener("keyup", function(event) {
  console.log(`키 '${event.key}'가 떼어졌습니다.`);
});

Form Events(폼 이벤트)

종류

폼 이벤트 종류	폼 요소와 관련된 동작에 의해 발생하는 이벤트
submit	폼 데이터가 제출될 때 발생
change	사용자가 입력 필드의 값을 변경했을 때 발생
focus	요소가 포커스를 얻었을때 발생
blur	요소가 포커스를 잃었을 때 발생

예시

let form = document.querySelector("form");

// 폼 제출 이벤트
form.addEventListener("submit", function(event) {
  event.preventDefault(); // 폼 제출을 막음
  console.log("폼이 제출되었습니다.");
});

// 입력 요소 값 변경 이벤트
form.querySelector("input").addEventListener("change", function() {
  console.log("입력값이 변경되었습니다.");
});

Window Events(윈도우 이벤트)

종류

윈도우 이벤트 종류	브라우저 창 또는 페이지 상태 변화에 의해 발생하는 이벤트
load	페이지 로딩이 완료되었을 때 발생
resize	브라우저 창의 크기를 변경했을 때 발생
scroll	사용자가 스크롤 했을 때 발생
unload	페이지를 벗어날 때 발생, 사용자가 다른 페이지로 이동하거나 브라우저를 닫을 때 발생

예시

// 페이지 로딩 완료 이벤트
window.addEventListener("load", function() {
  console.log("페이지 로딩이 완료되었습니다.");
});

// 스크롤 이벤트
window.addEventListener("scroll", function() {
  console.log("스크롤이 발생했습니다.");
});