[Event] JQ - event.delegateTarget 속성 ★ - 현재 호출된 이벤트 핸들러가 부착된 요소 반환. (= 이벤트.델러깃타겟 속성)

1. event.delegateTarget 예제 - div 요소 배경색 변경
2. event.delegateTarget 정의
3. event.delegateTarget 구문
4. event.delegateTarget 예제 - cf. event.currentTarget

event.delegateTarget 예제 - div 요소 배경색 변경

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div").on("click", "button", function(event){

    $(event.delegateTarget).css("background-color", "yellow");

  });

});

</script>

<div style="background-color:lightgray">

  <p>홈짱닷컴 Homzzang.com</p>

  <button>클릭</button>

</div>

<div style="background-color:lightgray">

  <p>그누보드/영카트 강의.</p>

  <button>클릭</button>

</div>

 

결과보기

event.delegateTarget 정의

 

현재 호출된 jQuery 이벤트 핸들러가 부착된 요소를 반환.

 

---

 

1.

on() 메서드를 통해서 이벤트 핸들러가 조상 요소에 부착되어 있는 경우 유용.

 

2.

이벤트가 요소에 직접 바인딩 되고 자손 요소에 위임이 없는 경우엔,

event.delegateTarget 속성은 event.currentTarget 속성과 동일함.

 

event.delegateTarget 구문

 

event.delegateTarget

 

---

[매개변수]

 

event

필수. 이벤트에 바인딩 된 함수에서 가져옴.

 

event.delegateTarget 예제 - cf. event.currentTarget

[이벤트 위임 O 경우] - 반환값 동일 X.

※ event.delegateTarget.nodeName : DIV

※ event.currentTarget.nodeName : BUTTON

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("div").on("click", "button", function(event){

    alert("delegateTarget 반환값: " + event.delegateTarget.nodeName +

    "\ncurrentTarget 반환값: " + event.currentTarget.nodeName);

  });

});

</script>

<div>

    <button>클릭</button>

</div>

 

결과보기

---

[이벤트 위임 X 경우] - 반환값 동일 O.

※ event.delegateTarget.nodeName : BUTTON

※ event.currentTarget.nodeName : BUTTON

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").on("click", function(event){

    alert("delegateTarget 반환값: " + event.delegateTarget.nodeName +

    "\ncurrentTarget 반환값: " + event.currentTarget.nodeName);

  });

});

</script>

<div>

    <button>클릭</button>

</div>

 

결과보기