• Q&A
  • 회원가입
  • 로그인

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

302  
목차
  1. event.delegateTarget 예제
  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>

 

결과보기



찾아주셔서 감사합니다. Since 2012