Question

标题可能没有正确措辞。基本上我正在使用自定义事件处理程序进行测试，并且到达了他们工作的地步，但事件处理程序的 this 指向ControlClientSide而不是触发事件的项目。

以下代码将澄清一切：

function ControlClientSide()
{    
    this.CheckBoxClicked = function(e) { }        
    this.Configure = function() {        
        $('#checkBox100').change(function(e) { $(this).trigger("CheckBoxClicked"); }.bind(this));                
    };
    this.Configure();
};

var x = new ControlClientSide();
$(x).on("CheckBoxClicked", function(e) { alert( /* $(this).val() + */ ' Hi'); })
    .on("CheckBoxClicked", function(e) { alert( /* $(this).val() + */ ' Hi2'); });

在两个处理程序中，我试图将此指向实际的复选框项。目前它指向ControlClientSide。任何人都可以建议我缺少什么吗？

请参阅以下JSFIDDLE：http://jsfiddle.net/KC5RH/3/

Answer 1

您使用.bind(this)将其明确绑定到您的对象。此外，您将对象设置为侦听事件，而不是DOM节点。因此，您需要删除bind(this)部分。

然后，使用trigger代替triggerHandler让事件冒泡到DOM，这样您就可以使用委托来捕获它：

function ControlClientSide()
{    
    this.CheckBoxClicked = function() { }        
    this.Configure = function() {        
        $('#checkBox100').change(function() {
            $(this).trigger("CheckBoxClicked"); 
        });   
    };
    this.Configure();
};

var x = new ControlClientSide();
$(document).on("CheckBoxClicked", "input", function() { console.log(this); alert(this.id); })

http://jsfiddle.net/KC5RH/9/

Answer 2

如果您想要访问触发事件的复选框，只需将其作为triggerHandler来电中的附加参数传递即可。另外，请删除.bind(this)来电，在此方案中不需要：

function ControlClientSide()
{    
    this.CheckBoxClicked = function() {  } 

    var thisControl = this;
    this.Configure = function() {        
        $('#checkBox100').change(function() { $(thisControl).triggerHandler("CheckBoxClicked", this);});   
    };
    this.Configure();
};

然后，您可以通过监听器中的参数访问该元素：

$(x).on("CheckBoxClicked", function(obj, arg) {  alert( $(arg).attr("id") + ' Hi'); })
    .on("CheckBoxClicked", function(obj, arg) { alert( $(arg).attr("id") + ' Hi2'); });

请参阅完整工作解决方案的小提琴：http://jsfiddle.net/85qdH/4/

JS - 无法在自定义事件的处理程序中将此指向调用者

2 个答案: