Why does triggering event result in endless loop?

Why does triggering event result in endless loop?

This test page illustrates a behavior that I did not expect.  

When an object triggers an event from a function that is a member of the object, and the event name is the same as the function name, then not only is the handler function called, but the function that triggered the event is called repeatedly.

If the event name and function name differ then this does not occur.

Am I doing something wrong or is this in fact intended behavior for some reason?

Here is a sample to demonstrate:

  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <title>WTF?</title>
  7. <style>
  8. .method {color: red;}
  9. .handled {color: blue;}
  10. </style>
  11. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  12. </head>
  13. <body>
  14. <script>
  15. var foo = {
  16. bar: function(otherEventName){
  17. $('body').append('<div class="method">bar method called<div>');
  18. $(this).trigger(otherEventName || 'bar');
  19. }
  20. };
  21. $(foo).on('bar doh', function(evt){
  22. $('body').append(
  23. '<div class="handled">' + 
  24. evt.type + ' event handled<div>'
  25. );
  26. });
  27. </script>
  28. <button onclick="foo.bar();">call foo.bar() and trigger 'bar' event</button>
  29. <button onclick="foo.bar('doh');">call foo.bar('doh') and trigger 'doh' event</button>
  30. <button onclick="$('.method, .handled').remove();">reset</button>
  31. </body>
  32. </html>