[jQuery] jQuery 이벤트 드리블링과 마우스 오버 이벤트 처리

26 Dec 2023

jQuery를 사용하여 웹 페이지를 개발하다 보면 이벤트 처리를 해야하는 경우가 많습니다. 여러 이벤트를 한 요소에 연결하는 방법 중, 드리블링(이벤트 버블링) 및 마우스 오버 이벤트의 처리 방법에 대해 알아보겠습니다.

드리블링(이벤트 버블링)

드리블링(이벤트 버블링)은 하위 요소에서 상위 요소로 이벤트가 전파되는 현상을 의미합니다. 이것은 jQuery에서 이벤트 위임을 가능하게 하고 코드를 간결하게 작성할 수 있도록 도와줍니다.

아래는 드리블링을 이용하여 이벤트를 처리하는 예제입니다.

$(document).on('click', '.parent', function() {
  // 실행할 코드
});

이 예제에서, .parent 요소의 자식 요소들이 클릭 이벤트를 발생시켰을 때도 이벤트가 상위 요소 document에 전파되어 이벤트를 처리할 수 있습니다.

마우스 오버(마우스가 요소 위로 올라갔을 때 발생하는) 이벤트를 처리하는 방법은 다음과 같습니다.

$('.target').mouseover(function() {
  // 실행할 코드
});

mouseover() 함수를 이용하여 해당 요소에 마우스가 올려졌을 때 실행할 코드를 작성할 수 있습니다.

이러한 방법들을 이용하여 jQuery로 이벤트를 처리할 수 있습니다.

위 내용은 jQuery를 사용한 이벤트 처리에 대한 간단한 예제를 다룬 것이며, 각 상황에 따라 더 다양한 방법으로 이벤트를 처리할 수 있습니다.

이상으로 jQuery 이벤트 드리블링과 마우스 오버 이벤트 처리에 대해 알아보았습니다.