자바스크립트 이벤트 처리

이벤트란 ? 

이벤트(event)는 웹 브라우저나 사용자가 실행하는 동작을 의미합니다.

예로 사용자가 웹 문서에서 마우스를 클릭하거나 키보드의 키를 누르는 것, 웹 브라우저에서 웹 문서를 불러오는 것 등이 모두 이벤트에 해당합니다. JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하고 이에 따라 다양한 작업을 수행할 수 있습니다.

 

이벤트의 종류

 

1. 문서 로딩 이벤트 :

웹 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 문서를 웹 브라우저 창에 보여주는 것과 관련된 이벤트입니다.

 

이벤트 타입 :

• load : 웹 문서가 완전히 로딩이 끝났을 때
• unload : 문서를 벗어날 때
• abort : 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때
• error : 문서가 정확히 로딩되지 않았을 때
• resize : 문서 화면의 크기가 변경될 때
• scroll : 문서 화면이 스크롤 되었을 때

2. 마우스 이벤트 :

마우스의 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트입니다.

 

이벤트 타입 :

• click : 왼쪽 버튼을 클릭한 순간
• dblclick : 왼쪽 버튼을 빠르게 두 번 클릭한 순간
• mouseover : 마우스 포인터가 요소 위로 올라온 순간
• mouseout : 마우스 포인터가 요소에서 벗어나는 순간
• mouseenter : 마우스 포인터가 요소 위로 올라온 순간(버블링 일어나지 않음)
• mouseleave : 마우스 포인터가 요소에서 벗어나는 순간(버블링 일어나지 않음)
• mousemove : 마우스를 움직이는 순간
• mousedown : 마우스 버튼을 누르는 순간
• mouseup : 마우스 버튼을 눌렀다 떼는 순간
• contextmenu : 오른쪽 버튼을 클릭한 순간

 

 

3. 키보드 이벤트 :

키보드에서 특정 키를 조작할 때 발생하는 이벤트 입니다.

 

이벤트 타입 :

• keydown : 키보드의 버튼을 누르는 순간
• keypress : 키보드의 버튼을 누르는 순간(출력 가능한 키에서만 동작)
• keyup : 키보드의 버튼을 눌렀다 떼는 순간

 

 

 

 

4. 포커스 이벤트 :

요소에 포커스가 생기거나 빠져나갈 때 발생하는 이벤트입니다.

 

이벤트 타입 :

• focusin : 요소에 포커스가 되는 순간
• focusout : 요소로부터 포커스가 빠져나가는 순간
• focus : 요소에 포커스가 되는 순간(버블링 일어나지 않음)
• blur : 요소로부터 포커스가 빠져나가는 순간(버블링이 일어나지 않음)

 

 

5. 입력 이벤트 :

폼 요소에 내용을 입력하면서 발생할 수 있는 다양한 이벤트입니다.

 

이벤트 타입 :

• submit : 폼을 전송하는 순간
• reset : 폼을 리셋하는 순간
• change : 입력된 값이 바뀌는 순간
• input : 값이 입력되는 순간
• select : 텍스트 필드 , 텍스트 에리어 안의 텍스트가 선택되는 순간

 

이벤트 처리 절차 

1. 이벤트 타겟 결정 : 이벤트가 발생한 HTML 요소를 결정합니다. 예로 클릭한 버튼이 이벤트 타겟이 됩니다.
2. 처리하고자 하는 이벤트 결정 : 처리할 이벤트의 종류를 결정합니다. 예로 마우스 클릭 , 키보드 입력 , 폼 제출 등이 있습니다.
3. 이벤트 핸들러(리스너) 구현 : 이벤트 타겟에서 이벤트가 발생하면 이를 처리할 이벤트 핸들러를 구현합니다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수입니다.
4. 이벤트 타겟에 이벤트 핸들러 등록 : 이벤트 타겟에 이벤트 핸들러를 등록합니다. 등록 방법에 따라 인라인 이벤트 처리 , 고전 이벤트 처리 , 표준 이벤트 처리 모델로 구분할 수 있습니다.

 

 

 

이벤트 처리 모델

 

인라인 이벤트 처리

인라인 이벤트 처리는 HTML 태그에 직접 이벤트 핸들러를 등록하는 방식입니다. 'on이벤트명' 속성을 사용하여 이벤트 처리 코드를 HTML 태그에 직접 추가합니다. HTML 코드와 JavaScript 코드가 혼합되어 코드 관리가 어려워질 수 있습니다.

 

고전 이벤트 처리

고전 이벤트 처리는 JavaScript 코드에서 이벤트 타겟에 이벤트 핸들러를 등록하는 방법입니다.

DOM API를 이용하여 HTML 요소를 선택하고 해당 요소에 이벤트 핸들러를 등록합니다. 이 방법은 HTML 코드와 JavaScript 코드를 분리하여 개발할 수 있어 유지보수에 유리합니다.