jQuery trigger()如何使用自定义事件？

Question

我正在使用其他人编写的代码，大致如下：

var _layoutRoot = $("#whatever");

eventName = 'CopyArticle';
eventData = { targetArticleIds: selectedArticleIds, targetCategoryIds: selectedCategoryIds };

// fire the event
if (eventName) // null is unexepcted here
    _layoutRoot.trigger(eventName, eventData);

我对这是什么意思不够了解。

我能看到 trigger 会导致命名事件发生。但是，自从何时出现了 JavaScript CopyArticle 事件？这是一个有效的事件吗？它将如何处理？

- Jonathan Wood

---

jQuery允许自定义事件。参见。 - Derek 朕會功夫

Answer 1

只需使用on将自定义事件附加到元素即可。要触发事件，请使用trigger。您可以使用数组向触发函数传递额外的参数。

HTML

<div id="test"></div>

JS

$("#test").on("customEvent", function(e,msg){
  alert(msg);
});
var dataToPass = "This is a msg";
$("#test").trigger("customEvent", [dataToPass]);

JS Fiddle: http://jsfiddle.net/85wjt/1/

- Kevin Bowersox

---

谢谢。不幸的是，我搜索了这个项目，但找不到 on.('CopyArticle 或 on.("CopyArticle。也许某种方式使用了一个变量。 - Jonathan Wood

尝试使用 _layoutRoot.on(CopyArticle, function(e, obj){});，然后使用 _layoutRoot.trigger(eventName, [eventData]); 来触发。 - Kevin Bowersox

我不确定我理解了。这是一个庞大的.NET项目。如果已经存在一个名为CopyArticle的事件处理程序，那么在项目中搜索on.('CopyArticle或on.("CopyArticle应该能够找到它。 - Jonathan Wood

@JonathanWood 也许作者使用了 .bind() 方法。此外，在这里使用 . 是语法上的错误，应该是 .on('CopyArticle。 - Ram

@KevinBowersox：我认为你没有明白我的意思。我从你的原始答案中理解了用法。正如我在问题中所说，这是一个现有的项目。如果它像你说的那样有效，我应该能够找到它的处理程序。你向我展示它更详细地如何工作并不能解决这个问题。 - Jonathan Wood

Answer 2

jQuery允许您触发任何名称的事件

$(".foo").on("some:custom:event", function(event) {
  console.log("hello");
});

$(".foo").trigger("some:custom:event");

// hello

- maček

Answer 3

根据jquery 网站，当我们使用.on()方法定义自定义事件类型时，.trigger()方法的第二个参数会变得有用。例如，假设我们已将处理程序绑定到自定义事件而不是上面所做的内置单击事件：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

- Scary Wombat