如何使用 .triggerhandler 捕获委托事件

Question

我们使用 jQuery 为 DOM 元素附加事件处理程序

1)直接——

    $(#elemId).bind("click",function(){ …//event handler code}); OR

2) 委托。 —

         $(document).delegate("#elemId","click",function(){ …//event handler code});

我们还遇到了一种情况，即我们需要从我们的代码中手动执行这些附加的事件处理程序。为此，我们可以使用 .trigger() API 在 jQuery 上的元素。

       $(#elemId).trigger("click") 

在某些情况下，我们只想执行我们附加的事件处理程序，但我们不想执行与该事件关联的默认操作。我们可以通过在 jQuery on element 中使用 .triggerHandler() API 来实现这一点

$(#elemId).triggerHandler("click");

例如我们可以在“复选框”列表上附加“点击”事件，并且我们可以在任何复选框被选中/取消选中时执行事件处理程序。此处，复选框的单击事件的默认操作是该复选框被选中/未选中（即复选框的状态发生更改。） 所以。在某些情况下，我们可能不想在单击复选框时更改复选框的状态，但我们希望在事件处理程序中执行代码。如前所述，这可以在 jQuery 中通过调用 .triggerHandler() 而不是 .trigger 来实现() 触发事件。

但是，当我们通过委托将事件附加到 DOM 元素时，这不起作用。 在事件委托的情况下，在不执行默认操作的情况下执行事件处理程序的另一种方法是什么？

请检查以下 JSfiddles 的区别： 用于直接事件处理：

       http://jsfiddle.net/g2TWh/7/

对于委托事件处理：

        http://jsfiddle.net/g2TWh/8/ 

（请注意，当您单击“运行”时，事件处理函数中的警报不会出现）

Answer 1

当我遇到相同情况时，我发现的一个解决方案是检查事件是否被触发，如果是，则阻止默认操作。通过这种方式，您可以触发完整事件并仅根据事件属性调整操作，而不是触发处理程序（如上所述的委托是不可能的）。以此为例：

//attach an event "click" by delegation
$(document).delegate("#childinput1", "click.test", function (e) {
    // prevent default if this event was triggered
    if (!!e.isTrigger) {
     e.preventDefault();   
    }
    alert('in delegated  "click" event handler');
});
testTrigger();

function testTrigger() {
    $("#childinput1").trigger("click.test");
}

这是修改后的 JSFiddle：http://jsfiddle.net/x9d9yjtv/

Answer 2

根据 JQuery API：

使用 .triggerHandler() 创建的事件不会在 DOM 层次结构中冒泡；如果它们没有被目标元素直接处理，它们什么也不做。

因为你使用了事件委托，所以事件不能冒泡到假设处理事件的文档

另一种方法是添加自定义事件并在其处理程序中使用 event.preventDefault()：

    //attach an event "click" by delegation
$(document).on("customevent", "#childinput1", function (e) {
    e.preventDefault();
    alert('in delegated  "custom" event handler');
});
$(document).on("click", "#childinput1", function (e) {
    alert('in delegated  "click" event handler');
});
testTrigger();

function testTrigger() {
    $("#childinput1").trigger("customevent");
}

Fiddle

顺便说一句，如果您使用 jquery 1.7+，您应该可以使用“$.on”而不是“$.delegate”：

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。 然而，对于早期版本，它仍然是最有效的方法 使用事件委托。