jQuery – 이벤트 핸들링 – 2 – 이벤트 전파와 이벤트 객체

jQuery – 이벤트 핸들링 – 2 – 이벤트 전파와 이벤트 객체

이벤트 전파란?

이벤트 전파는 HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소나 자식 요소로 전달되는 동작을 말합니다. 이벤트 전파에는 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing) 두 가지 방식이 있습니다.

이벤트 버블링

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 그 부모 요소들로 이벤트가 전파되는 방식입니다. 예를 들어, <button> 요소를 클릭하면 클릭 이벤트가 <button>에서 시작되어 부모 요소인 <div>까지 전파됩니다.

<div>
  <button>버튼</button>
</div>

$('button').click(function(event) {
  console.log('버튼 클릭');
});

위의 예시에서 버튼을 클릭하면 콘솔에 “버튼 클릭”이 출력되는데, 이는 버튼에서 시작된 이벤트가 버튼의 부모 요소인 <div>로 전파되어 발생한 결과입니다.

이벤트 캡처링

이벤트 캡처링은 이벤트가 발생한 요소의 최상위 부모 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전파되는 방식입니다. 이벤트 캡처링은 이벤트 버블링과는 반대로 작동합니다.

<div>
  <button>버튼</button>
</div>

$('div').click(function(event) {
  console.log('버튼 클릭');
}, true);

위의 예시에서 <div>를 클릭하면 콘솔에 “버튼 클릭”이 출력되는데, 이는 <div>에서 시작된 이벤트가 버튼으로 전파되어 발생한 결과입니다.

이벤트 객체

이벤트 객체는 이벤트가 발생할 때 해당 이벤트에 대한 정보를 담고 있는 객체입니다. 이벤트 핸들러 함수의 인자로 전달되며, 이를 통해 이벤트의 속성과 메서드에 접근할 수 있습니다.

<button>클릭</button>

$('button').click(function(event) {
  console.log(event.target);  // 이벤트가 발생한 요소
  console.log(event.type);  // 이벤트의 종류 (click, mouseover 등)
  console.log(event.pageX, event.pageY);  // 마우스 포인터의 페이지 상의 좌표
  event.stopPropagation();  // 이벤트 전파 중지
});

위의 예시에서 클릭 이벤트가 발생한 버튼의 요소 객체에는 event.target을 통해 접근할 수 있습니다. 또한, event.type을 사용하면 이벤트의 종류를 확인할 수 있습니다. 마우스 이벤트의 경우, event.pageX와 event.pageY를 사용하여 마우스 포인터의 페이지 상의 좌표를 확인할 수 있습니다. 이벤트 객체의 stopPropagation() 메서드를 호출하면 이벤트의 전파를 중지할 수 있습니다.

이벤트 전파의 주의사항

1. 이벤트 전파는 원치 않는 동작을 유발할 수 있으므로 신중하게 다루어야 합니다. 부모 요소로의 이벤트 전파는 버블링 방식으로 작동하며, 자식 요소로의 이벤트 전파는 캡처링 방식으로 작동합니다.
2. 이벤트 객체를 이용하여 이벤트 전파를 조작할 수 있습니다. stopPropagation() 메서드를 호출하면 이벤트의 전파를 중지할 수 있습니다.
3. 이벤트 전파를 이용하여 이벤트 위임(Event Delegation)을 구현할 수 있습니다. 이벤트 위임은 부모 요소에 이벤트 핸들러를 등록하고, 자식 요소에서 발생한 이벤트를 부모 요소에서 처리하는 방식입니다. 이를 통해 동적으로 생성되는 요소에도 이벤트 핸들러를 적용할 수 있습니다.

이벤트 전파와 이벤트 객체는 jQuery에서도 동일하게 동작합니다. 위에서 설명한 내용을 기반으로 jQuery를 활용하여 이벤트 전파와 이벤트 객체를 다루어 보세요. 좀 더 실제적인 예제를 통해 jQuery의 강력한 이벤트 핸들링 기능을 경험해보세요!

주의해야할 점:

• 이벤트 전파는 의도하지 않은 동작을 유발할 수 있으므로 주의해야 합니다. 필요한 경우에만 이벤트 전파를 사용하고, stopPropagation() 메서드를 적절하게 활용하여 전파를 중지시키세요.
• 이벤트 객체를 잘 활용하여 이벤트에 대한 정보를 얻고 필요한 처리를 할 수 있습니다. 이벤트 객체의 속성과 메서드를 참고하여 다양한 동작을 구현해보세요.
• 이벤트 위임은 동적으로 생성되는 요소에도 이벤트 핸들러를 적용하기 위해 유용한 패턴입니다. 부모 요소에 이벤트 핸들러를 등록하고, 자식 요소에서 발생한 이벤트를 부모 요소에서 처리하는 방식을 적용해보세요. 이를 통해 코드의 유지보수성을 높일 수 있습니다.