마치 미어캣 같은 이벤트 리스너, 이벤트 핸들러

event

사건

---

우리가 웹 페이지를 사용할 때 가장 흔하게 사용하는 것은 클릭이다. 스마트폰이라면 터치일 것이다.

여기서 이벤트란 클릭같은 행위를 했을 때 발생하는 일을 말한다.

 

아래 뉴스섹션 처럼 화살표를 클릭하니까 페이지를 이동하거나 섹션 제목을 클릭하니까 섹션 페이지가 변경되거나 하는 것들이 모두 '이벤트'이다.

 

그리고 이러한 클릭 말고도 페이지를 스크롤한다거나 키보드를 입력한다거나(복사, 붙여넣기), 마우스를 드래그하거나 이미지 위에 올려놓거나 하는 행위도 모두 이벤트가 발생할 수 있다.

즉, 이벤트란 특정 행동을 했을 때 발생하는 일, 작동하는 코드 등을 의미한다.

물론 사용자가 직접적으로 상호작용을 하지 않을 경우에도 특정 조건을 만족하면 이벤트가 발생할 수도 있다.

 

DOM 이벤트의 종류

DOM 이벤트는 크게 다음과 같은 종류로 나눌 수 있다.

• 마우스 이벤트:
  • click: 마우스 클릭
  • dblclick: 마우스 더블 클릭
  • mousedown: 마우스 버튼 누름
  • mouseup: 마우스 버튼 놓음
  • mousemove: 마우스 움직임
  • mouseover: 마우스 커서가 요소 위로 올라감
  • mouseout: 마우스 커서가 요소 밖으로 나감
• 키보드 이벤트:
  • keydown: 키 누름
  • keyup: 키 놓음
  • keypress: 문자 키 누름
• 폼 이벤트:
  • submit: 폼 제출
  • change: 폼 요소 값 변경
  • focus: 폼 요소에 포커스
  • blur: 폼 요소에서 포커스 아웃
• 문서/창 이벤트:
  • load: 페이지 로딩 완료
  • unload: 페이지 언로드
  • resize: 창 크기 변경
  • scroll: 페이지 스크롤
• 터치 이벤트:
  • touchstart: 터치 시작
  • touchmove: 터치 움직임
  • touchend: 터치 종료
  • touchcancel: 터치 취소
• 기타 이벤트:
  • error: 에러 발생
  • resize: 윈도우 사이즈가 변경되었을 때
  • scroll: 스크롤바가 움직일 때

이벤트 리스너와 이벤트 핸들러

이벤트 리스너 (event Listener)

그런데 우리가 특정 행동을 했다고 해서 반드시 이벤트가 발생하는 것은 아니다. 예를 들어 버튼이 있어서 눌러놨는데 아무런 변화가 없을 수도있다. 때문에 우리는 프로그램에게 특정 행동이 발생했다는 것을 알려줘야 하는데 그것을 위해 존재하는 것이 바로 이벤트 리스너이다. 말 그대로 신호를 '듣고' 프로그램에 전달하는 역할이라고 할 수 있다.

이벤트 핸들러 (event handler)

그런데 이벤트가 발생했다는 사실을 프로그램에 전달만 하면 끝나는가? 실질적으로 그에 맞는 행동을 해야 이벤트라고 할 수 있듯이 실제로 행동을 하는 부분을 이벤트 핸들러라고 한다. 즉, 특정 이벤트가 발생했을 때 실행되는 코드 블록이다. 자바스크립트에서는 함수를 사용하여 이러한 코드 블록을 정의한다.

---

미어캣에 비유하자면

• 이벤트 리스너(Event Listener) : 주변을 경계하는 미어캣 감시병
  • 특정 사건(예: 독수리 등장, 뱀 접근)을 감지하면 무리에게 소리를 내거나 특정 신호를 보냄.
  • 즉, 특정 이벤트(예: 버튼 클릭, 키 입력)를 감시하는 역할.
• 이벤트 핸들러(Event Handler) : 신호를 듣고 반응하는 미어캣 무리
  • 감시병이 "위험하다!"라고 신호를 보내면, 무리는 도망치거나 숨는 행동을 선택.
  • 즉, 감지된 이벤트에 따라 특정 동작(함수 실행 등)을 수행.

 

 

const button = document.getElementById("myButton"); // 버튼 요소를 가져옵니다.

function handleClick() { // 이벤트 핸들러 함수 정의
  alert("버튼이 클릭되었습니다!"); // 팝업 창 표시
}

button.addEventListener("click", handleClick); // 이벤트 리스너 등록