JQuery

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

 

결과보기


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

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인