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

【问题标题】：how to trigger a custom event in jQuery, pass the original event and data如何在jQuery中触发自定义事件，传递原始事件和数据
【发布时间】：2012-03-20 18:18:22
【问题描述】：

我想在本机事件的处理程序中触发自定义事件，在这些条件下：

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

我能够做到这一点，而且它有效：

// 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 中（轻松）完成吗？

【问题讨论】：

标签： jquery

【解决方案1】：

trigger 函数有 2 种风格，我认为您应该查看第一种，语法为 .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"]);

来自文档..read more..

.trigger( eventType [, extraParameters] )

eventType 包含 JavaScript 事件类型的字符串，例如 click 或提交。

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

【讨论】：

您的解决方案不允许我在自定义事件处理程序中的原始事件上 preventDefault。
@ori 你能详细说明preventDefault 上会发生什么吗？它首先工作吗？我确信添加附加参数不会影响以前工作的任何内容。
首先，我在上面的代码中出错了，你看看。我正在构建一个我希望能够与之交互的 jQuery 插件。也许某种回调更合适。基本上我想要一个可以引用原始事件的自定义事件处理程序（可以在上面调用preventDefault），但是如果我这样做.trigger('custom', [event, foo])，那么处理程序就会变成function(c_event, n_event, foo) {}，看起来很难看。
@ori 您可以尝试将 arg 传递到另一个数组中，例如 $(this).trigger(custom, [[event, foo]]);，自定义事件将类似于 $('a').bind('some_custom_event', function (e, args)，然后您可以在 args 中访问 args[0] 和 foo 中的原始事件[1]。 See DEMO
这是我写的新代码。之前没有代码。我在我的问题中提供的代码有效，但我想看看是否有一些 jQuery 天才可以改进它。我还在其他地方使用了第一个 .trigger 风格，但在这里使用它意味着（为了满足我的要求）处理程序需要获取 2 个事件作为参数，这是我不喜欢的（因此从未实现） .也许我要求太多了...第一个处理程序参数始终是触发事件，所以也许我的原始解决方案无法改进...

【解决方案2】：

您可以创建一个 JQuery 事件 ($.Event)，该事件将允许 event.preventDefault() 并在事件触发后得到兑现或拾取。

所以，首先在你的插件/函数中创建事件，然后触发它：

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

然后在您的处理程序中，您可以访问您的 extraData 和 preventDefault；

$('#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 */
};

【讨论】：