El método $.proxy() en jQuery acepta una función existente y devuelve una nueva con un contexto particular. Generalmente, se usa para adjuntar eventos a un elemento donde el contexto apunta a un objeto diferente.
Sintaxis:
-
$(selector).proxy(function, context)
-
$(selector).proxy(context, name)
Parámetro: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- función: contiene el nombre de la función existente que se va a llamar.
- contexto: Muestra el nombre del objeto donde se encuentra la función.
- nombre: La función cuyo contexto se va a cambiar.
Ejemplo 1: este ejemplo muestra el contexto del 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>
Producción:
- Antes de hacer clic en el texto del encabezado h3:
- Después de hacer clic en el texto del encabezado h3:
- Haga clic en el botón Aceptar:
Ejemplo 2: este ejemplo llama al objeto objPerson y muestra su contenido.
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por AdeshSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA