jQuery $.proxy()方法
jQuery中的$.proxy() 方法接受一个现有的函数,并返回一个具有特定上下文的新函数。一般来说,它是用于附加事件到一个元素,其中的上下文是指向一个不同的对象。
语法:
$(selector).proxy(function, context)
$(selector).proxy(context, name)
参数:该方法接受上面提到的和下面描述的三个参数。
- function。它持有将被调用的现有函数名称。
- context。它显示了函数所在的对象的名称。
- name: 其上下文要被改变的函数。
例子1:这个例子显示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>
输出:
- 在点击标题文字h3之前。
- 点击标题文字h3后。
- 点击 “确定 “按钮。
实例2:本实例调用objPerson对象并显示其内容。
<!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>
输出:
- 在点击按钮之前。
- 点击该按钮后。