[jQuery] jQuery 이벤트 드리블링과 클릭 이벤트 처리
이번에는 jQuery를 사용하여 이벤트 드리블링(dribbling)과 클릭 이벤트 처리에 대해 알아보겠습니다.
이벤트 드리블링
이벤트 드리블링은 하위요소가 동일한 이벤트를 부모 및 자신에게 전파시키는 현상입니다.
// 예제 코드
$(document).ready(function(){
$(".container").on("click", function(){
// 부모와 자식 요소 모두 클릭 이벤트가 적용됩니다.
});
});
본 예제에서는 .container 클래스를 가진 요소를 클릭할 경우, 이벤트가 해당 요소와 그 부모 요소에 모두 전파됩니다.
클릭 이벤트 처리
일반적으로 클릭된 요소에 대한 처리를 위해서는 event.target을 이용합니다.
// 예제 코드
$(document).ready(function(){
$("button").on("click", function(event){
console.log($(event.target).text() + " 버튼이 클릭되었습니다.");
});
});
위의 코드는 버튼을 클릭할 경우 해당 버튼의 텍스트를 콘솔에 출력하는 예제입니다.
이처럼 jQuery를 이용하여 이벤트 드리블링과 클릭 이벤트 처리를 간단히 구현할 수 있습니다.