3

我从这里收到了一个代码截图： http: //jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/：

 var CounterButton = function(el){
    this.$el = $(el);
    this.counter = 0;
    this.bindEvents();
    this.myVal = 1;
}

CounterButton.prototype.bindEvents = function(){
    this.$el.click(this.clicked);
};

CounterButton.prototype.clicked = function(){
    this.increase();
    this.showMessage();
};

我试图找出这条特定的线：his.$el.click(this.clicked);. 当您this在click函数内部时，这是否指的是被点击的内容this.$el？

4

5 回答 5

2

这是否指的是被点击的内容是 this.$el？

不，它指的是一个名为clicked which 的函数，该函数在包含该bindEvents方法的对象内

但是this在事件处理程序中是指DOM ELEMENT！考虑这个简单的代码：

$("body").click(this.do1);

function do1()
{
 alert(this.tagName); //BODY     
}

请注意

$el.click(this.clicked)

就好像 ：

var that=this;
$el.on('click',function {}(that.clicked()));
于 2013-03-23T19:29:47.183 回答
0

this.$el指：$(el);(var CounterButton = function(el){...)

this.clicked指：CounterButton.prototype.clicked = function(){...

在 jQuery 中，$(el).click是一个可以触发或监听点击的函数。如果传递了一个函数，它将监听元素“el”中的单击，并在执行该函数时执行该函数。

但是，在函数“this.clicked”内部，发生了一些令人困惑的事情。jQuery 将被点击的元素传递给函数“this.clicked”，因此“this”是构造函数中的“el”。

CounterButton.prototype.clicked = function(){
    this.increase(); // this refers to the element 'el'
    this.showMessage(); // this refers to the element 'el'
};

这就是他收到此错误的原因：http: //jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/console/

你可以通过关闭来解决这个问题：

CounterButton.prototype.clicked = function(){
    var self = this;
    return function () {
        self.increase(); // self refers to CounterButton
        self.showMessage(); // self refers to CounterButton
};

而不是传递 this.clicked，而是传递 this.clicked()

 this.$el.click(this.clicked());
于 2013-03-23T19:33:45.420 回答
0

回答关于thisjQuery 事件处理程序内部的原始问题：不，它不一定是被点击的元素。具体来说，根据http://api.jquery.com/on/：

当 jQuery 调用处理程序时，this关键字是对传递事件的元素的引用；对于直接绑定的事件，这是附加事件的元素，对于委托事件，这是匹配的元素selector。（请注意，如果事件从后代元素冒泡，则this可能不等于event.target。）要从元素创建 jQuery 对象以便它可以与 jQuery 方法一起使用，请使用$(this).

于 2013-03-23T19:42:53.197 回答
0

在 jQuery 中，这总是指绑定事件句柄的 DOM 元素（http://api.jquery.com/bind/）。

为了更好地理解这一点，您可以在这里查看：“this”关键字是如何工作的？

如果您阅读整篇文章，您会明白为什么这个例子是错误的（以下文字来自您链接到的文章）：

使用错误的上下文调用了 clicked() 方法。如果您从未听说过 javascript 中的函数调用上下文，那么您应该阅读这篇精彩的文章。默认情况下，jQuery 中事件回调的上下文对象是目标 HTML 元素。但这很容易解决，我们只需要稍微修改 bindEvents() 方法：

CounterButton.prototype.bindEvents = function(){
    this.$el.click($.proxy(this.clicked, this));
};

$.proxy 是 jQuery 的函数（或作用域）绑定版本。此方法返回新函数，该函数将始终使用上下文对象调用，作为第二个参数提供。您可以在官方 jQuery 文档中阅读更多内容。

于 2013-03-23T19:52:18.297 回答
0

有些人把事情搞混了。从您的示例中看，与jQuery 函数内部的this行为无关。this

代码示例的用法如下：

var myButton = new CounterButton(domElement);

每个 this，因为它的构造函数将是：this == myButton

于 2013-03-23T20:00:24.293 回答