목차
- event.delegateTarget 예제 - div 요소 배경색 변경
- event.delegateTarget 정의
- event.delegateTarget 구문
- 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>
결과보기
