javascript - JQuery triggering custom event causes error - Stack Overflow

admin管理员组

文章数量:1401183

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

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

• javascript
• jquery
• jquery-events
• eventemitter

Share Improve this question Follow edited Mar 4, 2021 at 11:46 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 19, 2012 at 10:40 Jon WellsJon Wells 4,25999 gold badges4141 silver badges6969 bronze badges 1

• 4 +1 for "I just want to murder people without error." – st3inn Commented Oct 19, 2012 at 10:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

The problem is that jQuery is calling the method recursively. From http://api.jquery./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.

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/6neHC/

jQuery .triggerHandler() doc:

http://api.jquery./triggerHandler/

本文标签： javascriptJQuery triggering custom event causes errorStack Overflow