목차
- $.proxy() 예제 - 객체에 포함된 값으로 함수 내용 변경
- $.proxy() 정의
- $.proxy() 구문
- $.proxy() 예제 - 지정 함수로 지정 객체의 내용 변경
- $.proxy() 예제 - $.proxy() 반환 함수로 바인딩 시, 기존 바인딩 자동 해제
$.proxy() 예제 - 객체에 포함된 값으로 함수 내용 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var hz = {
site: "홈짱닷컴 Homzzang.com",
open: 2012,
show: function(){
$("p").after("사이트 : " + this.site + "<br> 오픈 : " + this.open + "<br/>");
}
};
$("button").click($.proxy(hz, "show"));
});
</script>
<button>클릭</button>
<p></p>
결과보기
$.proxy() 정의
기존 함수 가져와 특정 내용 들어간 새 함수 반환.
1.
내용이 다른 객체를 다시 가리키는 요소에 이벤트 연결할 때 주로 사용.
2.
$ .proxy에서 반환된 함수(예: sbClick)를 바인딩하면, jQuery는 기존 올바르게 바인딩 되었던 원래 함수의 바인딩을 자동 해제함. (맨 아래 예제 참고.)
PS1.
jQeury $.proxy() 매뉴얼 ★ - 예제 많음.
https://api.jquery.com/jQuery.proxy/
PS2.
이 글이 이해 안 되면, 아래 게시글도 참조.
https://dololak.tistory.com/38
$.proxy() 구문
$(selector).proxy(function, context, add) (아래 예제)
또는,
$(selector).proxy(context, name, add) (위 예제)
[매개변수]
function
호출할 기존 함수 지정.
context
함수 위치하는 객체명.
name
내용 바꿀 기존 함수명.
※ context 객체의 속성이여야 함.
add
선택. 함수에 전달할 추가 독립변수.
※ jQuery 1.6 +
$.proxy() 예제 - 지정 함수로 지정 객체의 내용 변경
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p><button name="button" id="btn">클릭</button></p>
<div id="demo"></div>
<script>
var hz = {
name: "Homzzang",
btn: function( event ) {
var et = event.target;
$( et ).css( "background-color", "red" );
$( "#demo" ).append( "홈짱 " + this.name + "<br>" );
$( "#btn" ).off( "click", this.btn );
}
};
var sb = {
name: "Sinbi",
btn: function( event ) {
$( "#demo" ).append( this.name + " " + "<br>" );
}
};
var sbClick = $.proxy( sb.btn, sb );
$( "#btn" )
.on( "click", $.proxy( hz.btn, hz ) ) // 홈짱 Homzzang
.on( "click", sbClick ) // Sinbi
.on( "click", $.proxy( sb.btn, hz ) ) // Homzzang
.on( "click", sb.btn ); // button
</script>
결과보기
$.proxy() 예제 - $.proxy() 반환 함수로 바인딩 시, 기존 바인딩 자동 해제
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p><button name="button" id="btn">클릭</button></p>
<div id="demo"></div>
<script>
var hz = {
name: "Homzzang",
btn: function( event ) {
var et = event.target;
$( et ).css( "background-color", "red" );
$( "#demo" ).append( "홈짱 " + this.name + "<br>" );
$( "#btn" ).off( "click", this.btn );
}
};
var sb = {
name: "Sinbi",
btn: function( event ) {
$( "#demo" ).append( this.name + " " + "<br>" );
}
};
var sbClick = $.proxy( sb.btn, sb );
$( "#btn" )
.on( "click", $.proxy( hz.btn, hz ) ) // 홈짱 Homzzang
.on( "click", sbClick ) // Sinbi
.on( "click", $.proxy( hz.btn, hz ) ) // 2번째 클릭부터 출력 X
.on( "click", sb.btn ); // button
</script>
결과보기
