JQuery触发自定义事件导致错误答案

【问题标题】：JQuery triggering custom event causes errorJQuery触发自定义事件导致错误
【发布时间】：2012-10-09 23:13:28
【问题描述】：

我有一个人对象，我本质上希望它能够发出自己的事件。但是，如果触发事件与原型同名，则 Chrome 会打印出相当大的错误。在下面的代码示例中，person.murder 触发了murder 事件，该事件将错误写入控制台。（代码更有意义）。

function Person() {

}

Person.prototype.murder = function() {
   $(this).trigger("murder");
}

我像这样调用触发器

var barry = new Person();
$(barry).on("murder", function(){
   alert("I am so angry");
})

barry.murder();

所以谋杀巴里会导致错误，但是如果事件类似于personDied，则不会出现错误。我是否正确触发了事件？我只想无误地杀人。

错误有时返回为折叠的<error>，有时返回为

未捕获的 RangeError：超出最大调用堆栈大小

【问题讨论】：

+1 表示“我只想无误地杀人。”

标签： javascript jquery jquery-events eventemitter

【解决方案1】：

问题是 jQuery 递归调用该方法。来自http://api.jquery.com/trigger/：

Note: For both plain objects and DOM objects, if a triggered event name matches the name
of a property on the object, jQuery will attempt to invoke the property as a method if no
event handler calls event.preventDefault(). If this behavior is not desired, use
.triggerHandler() instead.

所以你应该使用triggerHandler 而不是trigger。

【讨论】：

这很有趣！我从错误中猜到了递归的东西，但不知道这是设计使然！ triggerHandler 是一种享受。不错的一个

【解决方案2】：

触发器murder 在Person 上调用方法murder，因为您在对象Person 上触发了它。这将再次调用murder 方法等等（无休止的循环）。

如果使用jQuery的.triggerHandler()函数只会触发触发器，不会调用方法。

function Person() {

}

Person.prototype.murder = function() {
   $(this).triggerHandler("murder");
}

var barry = new Person();
$(barry).on("murder", function(){
   alert("I am so angry");
})

barry.murder();

工作示例：

http://jsfiddle.net/6neHC/

jQuery.triggerHandler() 文档：

http://api.jquery.com/triggerHandler/

【讨论】：