• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Selector JQ - :checked 선택자 - $(":checked") - checked="checked"인 모든 체크…
Event JQ - bind() 메서드 - JQ 3.0 폐기예고. / 요소에 이벤트 부착. (= bind메서드 = 바인…
Event JQ - change() 메서드 ★★★ - 입력값 변동/변화 시 이벤트 발생. (= change메서드 = …
Event JQ - delegate() 메서드 - JQ 3.0 폐기예고. / 하위요소(자식요소)에 이벤트핸들러 부착. …
Event JQ - die() 메서드 - JQ 1.7 폐기예고, JQ 1.9 폐기완료. / 이벤트 제거. (= die메…
Event JQ - error() 메서드 - JQ 1.8 폐기예고. JQ 3.0 폐기완료. / 에러 이벤트 촉발 + 에…
Event JQ - event.currentTarget 속성 - 현재 이벤트 요소 반환. (= 이벤트.커런트타겟 속성)
Event JQ - event.data 속성 - 이벤트 메서드에 전달된 값을 반환. (=이벤트.데이터 속성) ※ 데이터…
Event JQ - event.delegateTarget 속성 ★ - 현재 호출된 이벤트 핸들러가 부착된 요소 반환. …
Event JQ - event.isDefaultPrevented() 메서드 - event.preventDefault()…
Event JQ - event.isImmediatePropagationStopped() 메서드 - event.stopI…
Event JQ - event.isPropagationStopped() 메서드 - event.stopPropagatio…
Event JQ - event.namespace 속성 ★★ - 이벤트 네임스페이스 반환.
Event JQ - event.pageX 속성 - 문서 왼쪽 기준해, 마우스커서 수평 위치 반환. (= 이벤트.페이지엑…
Event JQ - event.pageY 속성 - 문서 상단 기준해, 마우스커서 수직 위치 반환. (= 이벤트.페이지와…
Event JQ - event.preventDefault() 메서드 ★★★★★ - 이벤트 발생 시, 요소의 기본동작 …
Event JQ - event.relatedTarget 속성 - 마우스 이동 시, 막 이탈한 관련 요소 반환. (= …
Event JQ - event.result 속성 - 이벤트의 미자막 반환값 반환. (= 이벤트.리절트 속성)
Event JQ - event.stopImmediatePropagation() 메서드 ★★★ - 다른 이벤트 실행 차단…
Event JQ - event.stopPropagation() 메서드 ★★★ - 이벤트 확산(= 버블링)을 방지. (=…
6/15
목록
찾아주셔서 감사합니다. Since 2012