Javascript JS-无法将其指向自定义事件处理程序中的调用方

标题的措辞可能不正确。 基本上，我正在使用自定义事件处理程序进行测试，并达到了它们的工作点，但是事件处理程序的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。有人能告诉我我遗漏了什么吗

---

请参阅以下JSFIDLE:

您正在使用

.bind（this）

将其显式绑定到对象。另外，您将对象设置为侦听事件，而不是DOM节点。因此，您需要删除

绑定（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); })

---

如果要访问触发事件的复选框，只需在

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'); });

---

有关完整的工作解决方案，请参阅小提琴：

我有点困惑。“CheckBoxClicked”不是您绑定到

ControlClientSide

实例的文档的一部分。这在JSFIDLE中不起作用。单击复选框时不会触发“CheckBoxClicked”事件ControlClientSide中的console.log会正常工作。ControlClientSide之外的处理程序中的console.log不起作用。@BlueChameleon，等等，我注意到了其他问题：triggerHandler代替trigger有什么特殊原因吗？文档说使用triggerHandler触发的事件不会在DOM中冒泡。为什么在尝试获取处理程序中的id（$（elem）.attr（“id”））时，它会出现未定义的情况？如果我在处理程序中输入console.log（this），它会返回为：ControlClientSide{CheckBoxClicked:function，Configure:function，jquery10100844512141304:Object}抱歉，我本来错过了一个情人。请看我更新的小提琴。太好了。这正是我需要的。非常感谢！：）