如何在jQuery中触发自定义事件，并传递原始事件和数据。

Question

我想在本地事件的处理程序中触发自定义事件，满足以下条件：

• 我希望处理程序采用此形式：function(event, arg) {}，其中
• event 是原始的本地事件（因此可以调用event.preventDefault()）
• arg 是由trigger器传递的一些数据（在原始事件的处理程序中）
• 两个事件（本地和自定义）都在同一个元素上触发（因此自定义事件的名称必须与原始事件不同）

我已经取得了一定进展，并且它可以工作：

// the native event handler 
function(event) {
    var e = jQuery.Event("some_custom_event");
    e.foo = 'bar';
    $(this).trigger(e);
    if (e.isDefaultPrevented())
        event.preventDefault();
}

// an example handler for the custom event:
function (event) {
    alert(event.foo);
    event.preventDefault();
}

我想我也可以将原始事件和foo作为参数传递给自定义事件处理程序，但我希望有一个标准的处理程序（没有function(event1,event2)）。

在jQuery中可以（轻松地）实现我想要的吗？

- ori

Answer 1

trigger函数有两种用法，建议使用第一种语法：.trigger( eventType [, extraParameters] )。

如果我理解正确，您需要像下面这样传递foo作为额外参数：

$(this).trigger(e, [foo]);

以下是jQuery文档中的一个例子:

$("p").click( function (event, a, b) {
// when a normal click fires, a and b are undefined
// for a trigger like below a refers to "foo" and b refers to "bar"

} ).trigger("click", ["foo", "bar"]);

来自文档.. 阅读更多..

.trigger( eventType [, extraParameters] )

eventType是一个包含JavaScript事件类型的字符串，例如click或submit。

extraParameters是传递给事件处理程序的附加参数。

- Selvakumar Arumugam

---

你的解决方案不允许我在自定义事件处理程序中对原始事件进行preventDefault。 - ori

@ori 你能详细说明一下 preventDefault 应该发生什么吗？它一开始就起作用了吗？我确信添加额外参数不会影响之前已经正常工作的任何内容。 - Selvakumar Arumugam

首先，我在上面的代码中犯了一个错误，请看一下。我正在构建一个jQuery插件，希望能与之交互。也许某种回调函数更适合。基本上我想要一个自定义事件处理程序，可以引用原始事件（可以在其上调用 preventDefault），但是如果我使用 .trigger('custom', [event, foo])，则处理程序变成了 function(c_event, n_event, foo) {}，看起来很丑。 - ori

@ori 你可以尝试将参数放在另一个数组中传递，例如 $(this).trigger(custom, [[event, foo]]);，然后自定义事件会像这样 $('a').bind('some_custom_event', function (e, args)，接着你就可以在 args[0] 中访问原始事件，在 args[1] 中访问 foo。查看演示 - Selvakumar Arumugam

这是我写的新代码。之前没有任何代码。我在问题中提供的代码可以工作，但我想看看是否有一些jQuery天才可以改进它。我也在其他地方使用第一个.trigger风格，但在这里使用它意味着（为了满足我的要求）处理程序需要获取2个事件作为参数，我不喜欢（因此从未实现）。也许我要求太多了...第一个处理程序参数始终是触发的事件，因此可能无法改进我的原始解决方案... - ori

Answer 2

您可以创建一个JQuery事件（$.Event），它将允许使用event.preventDefault()并在事件触发后被识别或接收。

因此，首先在插件/函数中创建事件，然后触发它：

var event = $.Event('myCustomEvent');
$element.triggerHandler(event, [extraData1, extraData2]);

然后在你的处理程序中，你可以访问你的extraData并阻止默认操作；

$('#someElement').on('myCustomEvent', function (event, extraData1, extraData2) {
   event.preventDefault();
};

现在您可以在原始触发器之后检查默认值是否被阻止。

var event = $.Event('myCustomEvent');
$element.triggerHandler(event, [extraData1, extraData2]);

if (event.isDefaultPrevented()) {
    /* Do something as user prevented default */
} else {
    /* Proceed as normal */
};

- Lore Giver