JQuery triggering custom event causes error

Question

I have a person object and I essentially want it to be able to emit its own events. However if the trigger event has the same name as the prototype than Chrome prints out a rather large error. In the code sample below person.murder triggers the murder event which writes an error to console. (the code makes more sense).

function Person() {

}

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

And I invoke the trigger like this

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

barry.murder();

So murdering barry causes an error, however if the event was something like personDied than there is no error. Am I triggering the event correctly? I just want to murder people without error.

The error is sometimes returned as a collapsed <error> and sometimes as

Uncaught RangeError: Maximum call stack size exceeded

Answer 1

The problem is that jQuery is calling the method recursively. From 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.

So you should use triggerHandler instead of trigger.

Answer 2

The trigger murder calls the method murder on Person since you trigger it on the object Person. That will again call the murder method and so on (unending loop).

If you use jQuery's .triggerHandler() function it will only trigger the trigger, and not call the method.

function Person() {

}

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

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

barry.murder();

working example:

http://jsfiddle.net/6neHC/

jQuery .triggerHandler() doc:

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