Question

I want an element to listen for a custom event that is actually triggered by itself. The custom event could possibly be triggered from a descendant but should then be ignored. It’s important that it origins from itself. It also needs to be an event since I might need additional ancestors to listen for the events.

The .on (http://api.jquery.com/on/) method is able to provide this functionality. The selector argument can be used as filter. However this does not work to filter out the listener element itself.

In short:
-The event must be able to bubble
-The trigger and the listener is the same element
-The listener must ignore the custom event if it’s triggered by an ancestors

How is this achieved?

Use case as requested

I use the jquery UI dialog widget

$el = $('#dialogDiv');
$el.on('customEvent', $el /* Won't work */, function() {
    //Do whatever
});
$el.dialog({
    open: function() {
        $el.trigger('customEvent');
    }
});

Answer 1

.on works fine; to ignore ancestors check e.target:

$el.on('customEvent', function(e) {
  if(e.target === this) {
    //Do whatever
  }
});