참조 : https://api.jquery.com/event.delegateTarget/
event.delegateTarget.
이 속성은 delegate() 나 on()에 의해 위임된 이벤트 객체에서 부모객체를 참조할때 유용하게 쓰인다.
부모 객체는 delegate() 나 on() 메서드를 호출하고 핸들러를 등록하여 자식 객체에서 발생하는 이벤트를 버블링 단계에서 캡쳐, 처리할수 있다. 이때 전달되는 이벤트 객체에서 부모객체를 참조할수 있다.
예를 들자.
| 1 |
| 100 |
이런식으로 테이블 안에 a 태그가 100가 있다고 치자.
그런데
$('a').click(function(){};}
요런 식으로 붙이면, 이벤트 핸들러가 100가 붙는다..
물론 핸들러 마다 메모리를 물고 있게 되는건 당연하며, 쓸데없는 자원 낭비다.
그럼 어찌하냐
$('#ancestor').on('click', 'a', function(event)
{
console.log(this) // a 객체
}
이렇게 하면 #ancestor 객체는 버블링 단계에서 클릭 이벤트를 발생시킨 a 객체를 참조 할수 있다.
하나의 이벤트 핸들러만 붙이면 된다. 훨씬 효율적이지 않은가.
이때 핸들러에서의 this 는 a 객체가 된다.
하지만 어쩌다보니 ancestor 객체를 참조해야 할 경우가 생긴다.
물론 지금 같은 경우아 id 속성을 정의해놓았으니 바로 참조 할수있지만
그렇지 못할 경우가 생각보다 많다, 그리고 본인처럼 id 나 class 속성을 주는걸 별로 안좋아하는 경우도 있다. ㅎ
이때 event.delegateTarget 속성으로 ancestor 객체를 참조할 수 있다.
$('#ancestor').on('click', 'a', function(event)
{
console.log(event.delegateTarget); // #ancestor
}
이런 위임된 이벤트 핸들러를 등록하지 않고 이벤트를 직접 핸들링 하는 경우- 위의 예처럼 $('a').click() 같은 경우
event.delegateTarget 와 event.currentTarget 속성은 모두 같은 객체를 참조한다.
다른 예
$('.box').on('click', 'button', function(event)
{
$(event.delegateTarget).css('background-color', 'red');
}
이 경우 box의 백그라운드 색상이 red 로 바뀐다.