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

JS - Cant get this to point to callers this in handler of custom event

本文关键字：调用 程序 处理 自定义 事件 JS      更新时间：2023-09-26

标题可能措辞不正确。基本上，我正在使用自定义事件处理程序进行测试，并达到了它们正在工作的地步，但是事件处理程序指向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/

如果要访问触发事件的复选框，只需将其作为附加参数传递到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/

您使用 .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/

相关文章：