O método $.proxy() em jQuery aceita uma função existente e retorna uma nova com um contexto particular. Geralmente, ele é usado para anexar eventos a um elemento onde o contexto está apontando de volta para um objeto diferente.

Sintaxe:

  • $(seletor) .proxy (função, contexto)
  • $(seletor) .proxy (contexto, nome)

Parâmetro: este método aceita três parâmetros, conforme mencionado acima e descrito abaixo:

  • função: contém o nome da função existente que deve ser chamada.
  • contexto: Mostra o nome do objeto onde se encontra a função.
  • nome: a função cujo contexto deve ser alterado.

Exemplo 1: Este exemplo exibe o contexto do elemento h3.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery $.proxy() Method
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <script>
        $(document).ready(function() {
           
            test = function() {
                this.txt = "Property of Object";
                $("h3").click($.proxy(this.myClick, this));
            };
               
            test.prototype.myClick = function(event) {
                alert(this.txt);
                alert(event.currentTarget.nodeName);
            };
               
            var x = new test();
           
        });
    </script>
</head>
  
<body style="text-align:center;">
   
    <h1>Welcome to GeeksforGeeks!.</h1> 
      
    <div style="background-color:green">
        <h3>Geeks for Geeks.</h3>    
    </div>
</body>
  
</html>


Saída:


  • Antes de clicar no texto do título h3:
  • Depois de clicar no texto do título h3:
  • Clique no botão OK:


Exemplo 2: Este exemplo chama o objeto objPerson e exibe seu conteúdo.


<!DOCTYPE html>
<html>
      
<head>
     <title>
        jQuery $.proxy() Method
     </title>
       
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to illustrate $.proxy() Method -->
    <script>
        $(document).ready(function(){
            var objPerson = {
                test: function() {
                    $("h2").after("GeeksforGeeks");
                }
            };
          
            $("button").click($.proxy(objPerson, "test"));
        });
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1>Welcome to GeeksforGeeks!.</h1> 
      
    <div style="background-color:green">
        <button>The $.proxy Method.</button>        
        <h2></h2>  
    </div>
</body>
  
</html>




Saída:


  • Antes de clicar no botão:
  • Após clicar no botão: