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

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

분류 제목
Event JQ - scroll() 메서드 ★★★ - 스크롤 이벤트를 부착/촉발 (jquery, scroll, even…
Event JQ - select() 메서드 - 입력창의 문자열 드래그 선택. (= select이벤트 = 실렉트/셀렉트 …
Event JQ - submit() 메서드 ★ - 폼 입력값 전송 이벤트 촉발/실행함수 지정. (= submit메서드 …
Event JQ - toggle() 메서드 - JQ 1.9 폐기완료. / 여러 클릭 이벤트간 상호전환. (= togg…
Event JQ - trigger() 메서드 ★ - 지정 이벤트 수동 촉발과 이벤트 기본동작 수행. (= 트리거 메서드…
Event JQ - triggerHandler() 메서드 - 지정 이벤트 수동 촉발만 함. (= 트리거핸들러 메서드)
Event JQ - unbind() 메서드 - JQ 3.0 폐기예고, off() 메서드로 대체. 추가된 이벤트핸들러 제…
Event JQ - undelegate() 메서드 - JQ 3.0 폐기예고. off() 메서드로 대체. / 이벤트핸들러…
Event JQ - unload() 메서드 - JQ 3.0 폐기완료. / 페이지 떠날 때 실행. (= 언로드 메서드)
Effect JQ - clearQueue() 메서드 - 선택요소에서 실행 대기 함수 모두 제거/삭제. (= clearQu…
Effect JQ - delay() 메서드 - 실행 대기 함수의 실행을 지연. (= delay메서드 = 딜레이메서드)
Effect JQ - dequeue() 메서드 - 실행 대기 함수를 계속 실행. (= dequeue메서드 = 디큐메서드)
Effect JQ - fadeIn() 메서드 - 선택요소를 천천히 나타나게 하기. (= fadeIn메서드 = 페이드인메서…
Effect JQ - fadeOut() 메서드 - 선택요소를 천천히 사라지게 하기. (= fadeOut메서드 = 페이드아…
Effect JQ - fadeTo() 메서드 - 지정 불투명도로 서서히 변경. (= fadeTo메서드 = 페이드투메서드…
Effect JQ - fadeToggle() 메서드 ★ - fadeIn(), fadeOut() 메서드 상호 전환. (= …
Effect JQ - finish() 메서드 - 모든 실행 함수 중지/제거/완성. (= finish메서드 = 피니시메서드…
Effect JQ - hide() 메서드 - 선택요소 감추기/숨기기/비노출. (= hide메서드 = 하이드메서드)
Effect JQ - queue() 메서드 -실행 대기 함수 개수 표시. (= queue메서드 = 큐메서드)
Effect JQ - show() 메서드 - 선택요소 보이기/보이게하기/노출/나타내기/ = show메서드 = 쇼우메서드)
8/15
목록
찾아주셔서 감사합니다. Since 2012