[jQuery] event.target와 this의 차이 + 이벤트 위임 예시

event.target

이벤트가 발생한 정확한 지점에 대한 정보를 반환한다.

• event.target는 실제 이벤트가 시작된 target요소 버블링 되어도 변하지 않음
• this(=event.curentTarget)는 현재 샐행중인 핸들러가 할당된 노드를 참조

 

이벤트 위임(event delegation)

 

요소마다 이벤트 핸들러를 할당하지 않고 공통 조상요소에 할당해서 한개의 이벤트 핸들러로 여러 요소를 한꺼번에 처리 할 수 있다.

공통 조상에 할당한 핸들러에서 event.target를 이용하면 실제 이벤트가발생한 위치를 알 수 있고 이를 이용해서 이벤트를 핸들링 할 수 있다.

 

하나의 이벤트 리스너로 여러 이벤트 처리하기

$대상.on("이벤트명", "선택자", 이벤트 리스너)

 

아래는 ul li리스트 중 하나를 클릭하면 click이벤트가 실행

현재 클릭된 노드 this에 css를 적용

<script>
	$(document).ready(function() {
        $("ul.list li").on("click", function() {
            $(this).css('background-color','#ddd')
        })
    });
</script>

<ul class="list">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
</ul>

위의 click 이벤트가 실행되면 각 메뉴 항목마다 이벤트 리스너가 등록되게된다.
각각의 li마다 이벤트 리스너가 등록되게 된다.

 

 

이 때 이벤트 위임을 사용하면 이벤트 리스너를 하나만 등록하고 동일한 효과를 줄 수 있다.

$("ul").on("click", function(e) { //li가 아니라 상위공통 요소인 ul에 click 이벤트 등록
    if(e.target.tagName=="LI"){ //e.target(이벤트를 발생한 노드)가 li면 실행
        $(e.target).css('background-color','#ddd');
    }
})

상위 고통 부모 요소인 UL태그에 Click 이벤트를 등록 하면 한번만 등록 된다.
li를 클릭해도 버블링에 의해서 dom구조를 타고 ul에 걸려있는 click 이벤트가 실행되
실제 이벤트가 어디서 시작했는지 e.target 메서드를 사용하면 타겟된 지점을 알 수 있다. 클릭한 영역 태그가 li인지 확인하고 맞을 경우 해당 li에 배경색 변경

 

이처럼 버블링 이벤트 위임 event.target을 이용하여 이벤트 리스너 하나로 여러 이벤트를 처리 할 수 있다.

 

 

 

이벤트 위임의 특징

• 각 항목마다 이벤트 리스너가 등록되는게 아니고 공통 하나로 처리하기 때문에 메모리가 절약된다.
• 이벤트 위임을 사용하려면 반드시 버블링이 발생 되야 한다.