chapter.13 이벤트 핸들링

 

이벤트 핸들링은 사용자가 웹페이지와 상호작용할 때 발생하는 이벤트를 처리하는 방법으로,

버튼 클릭, 마우스 움직임, 키보드 입력 등 다양한 이벤트가 발생할 수 있다.

이 때 이벤트가 발생하면 이를 처리하기 위해 이벤트 핸들러를 설정하여 원하는 동작을 실행한다.

 

1. 이벤트 처리 방식

자바 스크립트에서는 이벤트를 처리하는 두 가지 주요 방법이 있다.

 

1) 속성에 직접 할당하는 방법

element.onclick = function() {
  console.log('버튼 클릭!');
};

• 해당 방법은 element가 클릭 되었을 때 바로 실행할 코드를 지정한다.
• 간단하고 직관적이나, 여러 개의 이벤트 핸들러를 같은 요소에 추가할 수 없다.

 

2) addEventListener() 메서드를 사용하는 방법

element.addEventListener("click", function() {
  console.log('버튼 클릭!');
});

• 이벤트를 추가하는 방식으로, 이벤트가 여러 개일 경우 각각 처리할 수 있다.
• 여러 개의 이벤트 리스너를 같은 요소에 추가할 수 있고, 이벤트 리스너를 제거할 수 있으나 좀 더 복잡하다.

 

---

 

 

2. 이벤트 객체 (event)

이벤트 핸들러 함수는 보통 이벤트 객체를 자동으로 전달 받는다. 

해당 객체에는 이벤트와 관련된 많은 정보가 담겨 있으며,

예를 들어 마우스 클릭 이벤트의 경우 클릭한 위치, 키보드 이벤트의 경우 눌린 키에 대한 정보가 포함된다.

element.addEventListener('click', function(event) {
  console.log(event);
});

 

• event.target: 이벤트가 발생한 요소(이벤트가 "타겟"한 요소)
• event.type: 이벤트의 종류 (예: 'click', 'keydown')
• event.preventDefault(): 기본 동작을 취소합니다 (예: 링크 클릭 시 페이지 이동을 막을 때 사용)
• event.stopPropagation(): 이벤트의 전파를 중지합니다 (버블링 또는 캡처링을 막을 때 사용)

 

---

 

 

3. 이벤트 종류

이벤트 구분	이벤트 이름	설명
Mouse Events	click	클릭 이벤트
	dblclick	더블 클릭
	mouseover	마우스가 요소 위에 올라갔을 때
	mouseout	마우스가 요소를 벗어날 때
	mousemove	마우스가 요소 위에서 움직일 때
	mousedown	마우스 버튼을 눌렀을 때
	mouseup	마우스 버튼을 뗄 때
Keyboard Events	keydown	키를 눌렀을 때
	keypress	키를 눌렀을 때
	keyup	키를 뗄 때
Focus Events	focus	요소에 포커스가 가면 발생
	blur	요소에서 포커스가 벗어나면 발생
Form Events	submit	폼 제출
	change	입력 값 변경
	input	입력 값이 수정될 때
Window Events	resize	윈도우 크기 변경
	scroll	스크롤 이벤트

 

 

 

 

---

 

 

4. 이벤트 전파

이벤트 전파는 두 가지 주요 방식으로 처리할 수 있다.

 

1) 버블링 (Bubbling)

이벤트가 발생한 요소에서부터 부모 요소를 차례대로 타고 올라간다.

document.querySelector('button').addEventListener('click', function() {
  alert('버튼 클릭!');
});
document.querySelector('body').addEventListener('click', function() {
  alert('Body 클릭!');
});

 

위 코드에서 버튼을 클릭하면 button의 이벤트가 먼저 실행되고, 그 후 body의 이벤트가 실행됩니다.

 

 

2) 캡처링 (Capturing)

이벤트가 트리의 루트에서부터 타겟 요소로 내려온다.

document.querySelector('body').addEventListener('click', function() {
  alert('Body 클릭!');
}, true); // true를 넣어 캡처링 활성화

 

위 코드에서는 body의 이벤트가 먼저 실행되고, 그 후 button의 이벤트가 실행됩니다.

 

 

3) 이벤트 전파 중지 (Stopping Propagation))

이벤트가 부모 요소로 전파되지 않도록 막을 수 있다.

button.addEventListener('click', function(event) {
  event.stopPropagation(); // 전파를 막음
  alert('버튼 클릭!');
});

 

 

출처 : https://chlolisher.tistory.com/22

 

 

---

 

 

5. 이벤트 핸들러 제거 

removeEventListener() 메서드를 사용하여 이벤트 핸들러를 제거할 수 있다.

이벤트 핸들러를 제거하려면 반드시 동일한 함수로 등록한 후 제거해야 한다.

 

function handleClick() {
  alert("클릭!");
}

button.addEventListener('click', handleClick);

// 나중에 이벤트 핸들러 제거
button.removeEventListener('click', handleClick);

 

 

 

---

 

 

6. 기타 메서드 및 속성

• setTimeout(), setInterval() : 주어진 시간 후 또는 일정한 시간 간격으로 함수를 실행할 수 있습니다.
• this 키워드 : 이벤트 핸들러 내에서 this는 해당 이벤트가 발생한 요소를 가리킨다. / 일반 함수에서 this가 다르게 동작할 수 있으므로 화살표 함수로 정의하는 경우 this가 외부 this를 참조하게 할 수 있다.