[Event] JQ - $.proxy() 메서드 - 기존 함수를 가져와 특정 구문을 가진 새 함수로 반환. (= proxy메서드 = 프록시 메서드)

목차

1. $.proxy() 예제 - 객체에 포함된 값으로 함수 내용 변경
2. $.proxy() 정의
3. $.proxy() 구문
4. $.proxy() 예제 - 지정 함수로 지정 객체의 내용 변경
5. $.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>

 

결과보기