我的事件处理程序有什么问题？答案

【问题标题】：What's wrong with my event handler?我的事件处理程序有什么问题？
【发布时间】：2011-07-24 02:37:57
【问题描述】：

假设我正在将 jquery click 事件的事件处理程序附加到我的对象的功能之一。但是为什么它在我的属性上返回 undefined 呢？

var buttonView = {
              label   : 'underscore',
              onClick : function(){ alert('clicked: ' + this.label); },           
        };

$('#bind').bind('click', buttonView.onClick); //clicked: undefined --> why is it undefined ?

【问题讨论】：

标签： javascript jquery html dom javascript-events

【解决方案1】：

在下面的 onclick 处理程序中，它指向 id 为“bind”的 dom 元素，并且它没有标签属性。如果您有任何自定义属性作为标签，您应该使用 $(this).attr("label") 来检索它。试试这个

 function(){ alert('clicked: ' + $(this).attr("label")) };

【讨论】：

他正在尝试获取buttonView 对象的label 属性。
这根本不可能。他必须为按钮设置一个属性并使用它。
@ShankarSangoli 它可以按照@patrick dw 所说的方式实现，因为它是通过闭包发生的（无论是通过代理还是buttonView）。
@Lea - 我知道闭包和代理，它可以按照帕特里克展示的方式使用，但这只是一个例子，我认为他不需要这样做。他可以使用比依赖闭包更好的数据属性。

【解决方案2】：

您正在传递buttonView.onClick 引用的函数，但它与buttonView 的关联没有保留。

要通过this 保留引用，您可以使用jQuery.proxy()^[docs] 方法。

$('#bind').bind('click', $.proxy(buttonView,'onClick'));

现在onClick 函数中的this 将引用您的buttonView 对象。

现场示例： http://jsfiddle.net/K72qs/

或者干脆在onClick函数中明确引用buttonView：

onClick : function(){ alert('clicked: ' + buttonView.label); },

现场示例： http://jsfiddle.net/K72qs/1/

【讨论】：

【解决方案3】：

你可以使用：

 $('#bind')
     .data('label', 'underscore')
     .click(function() {
         alert('clicked: ' + $(this).data('label'));
     });

【讨论】：