728x90
반응형
자바스크립트에서 이벤트(event), 이벤트 핸들링(event handling), 그리고 이벤트 핸들러(event handler)는 웹 페이지에서 사용자 상호작용을 다루는 핵심 개념이에요. 하나씩 자세히 설명해볼게요.
1. 이벤트(Event)란?
이벤트는 사용자나 브라우저가 발생시키는 특정 행동이나 상태 변화를 의미해요. 예를 들어, 버튼을 클릭하거나, 키보드를 누르거나, 페이지가 로드되는 등의 상황이 이벤트예요.
이벤트의 예
- 사용자 행동: click (클릭), keydown (키 누름), mouseover (마우스 올림).
- 브라우저 상태: load (페이지 로드 완료), resize (창 크기 변경), scroll (스크롤).
- 폼 관련: submit (폼 제출), change (입력값 변경).
이벤트 객체
이벤트가 발생하면 브라우저는 이벤트 객체(Event Object)를 생성해요. 이 객체는 이벤트에 대한 세부 정보(어떤 키를 눌렀는지, 클릭한 위치 등)를 담고 있어요.
document.querySelector('button').addEventListener('click', (event) => { console.log(event); // 이벤트 객체 출력 });
2. 이벤트 핸들링(Event Handling)이란?
이벤트 핸들링은 이벤트가 발생했을 때 그 이벤트를 감지하고, 이에 대응하는 동작을 실행하는 과정을 뜻해요. 쉽게 말해, "이벤트가 일어나면 뭘 할까?"를 정의하는 거예요.
이벤트 핸들링의 흐름
- 이벤트 발생 (예: 사용자가 버튼 클릭).
- 이벤트 감지 (자바스크립트가 이를 인식).
- 이벤트 핸들러 실행 (정의된 동작 수행).
방법
자바스크립트에서 이벤트 핸들링은 주로 아래 세 가지 방식으로 구현돼요:
- HTML 속성 사용:
<button onclick="alert('클릭됨!')">클릭</button>
- DOM 프로퍼티 사용:
document.querySelector('button').onclick = function() { alert('클릭됨!'); };
- addEventListener 사용 (가장 추천):
document.querySelector('button').addEventListener('click', function() { alert('클릭됨!'); });
3. 이벤트 핸들러(Event Handler)란?
이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수를 말해요. 즉, 이벤트에 반응해서 실행할 코드를 정의한 부분이에요.
특징
- 이벤트 핸들러는 보통 함수 형태로 작성됨.
- 이벤트 객체를 매개변수로 받을 수 있음.
- 한 요소에 여러 핸들러를 붙일 수도 있음 (addEventListener 사용 시).
예제
function handleClick(event) { console.log('버튼이 클릭됨!'); console.log('클릭 위치:', event.clientX, event.clientY); } const button = document.querySelector('button'); button.addEventListener('click', handleClick);
이벤트 핸들러 제거
removeEventListener로 핸들러를 제거할 수도 있어요. 단, 제거하려면 함수가 참조로 남아있어야 함.
function handleClick() { console.log('클릭!'); } button.addEventListener('click', handleClick); button.removeEventListener('click', handleClick); // 제거
세 개념의 관계
- 이벤트: "무엇이 일어났는지" (예: 클릭).
- 이벤트 핸들러: "그 일이 일어났을 때 실행할 코드" (예: 함수).
- 이벤트 핸들링: "이벤트를 감지하고 핸들러를 실행하는 전체 과정".
추가로 알아두면 좋은 점
- 이벤트 버블링(Event Bubbling)
이벤트가 하위 요소에서 발생하면 상위 요소로 전파되는 현상.버튼 클릭 시 button → div 순으로 alert가 뜸.<div onclick="alert('div')"> <button onclick="alert('button')">클릭</button> </div> - 이벤트 캡처링(Event Capturing)
상위 요소에서 하위 요소로 이벤트가 전파되는 반대 방식 (기본은 버블링). - 이벤트 중단
- event.stopPropagation(): 이벤트 전파 중단.
- event.preventDefault(): 기본 동작(예: 링크 이동, 폼 제출) 막기.
예제
button.addEventListener('click', (e) => { e.preventDefault(); // 기본 동작 방지 e.stopPropagation(); // 전파 중단 console.log('클릭 처리됨'); });
요약
- 이벤트: 사용자가 버튼을 누르거나 페이지가 로드되는 등의 "사건".
- 이벤트 핸들링: 사건을 감지하고 반응하는 전체 프로세스.
- 이벤트 핸들러: 그 사건에 반응해서 실행되는 함수.
728x90
반응형