When is it better (performance/readability/optimal) to use delegation instead of attaching the handler directly to the element in question?
$(".container").on("click", "button", function(){});
$(".container button").on("click", function(){});
It depends on the number of click events that are bound inside the container.
$(".container button").on("click", function(){});
If there are only a few events happening and the button is already on the page the event bound by above signature should do the work for you.
$(".container").on("click", "button", function(){});
When a element is dynamically added to your page then use Event Delegation wherein normal binding of events will not work.
The performance question comes into play based on how heavy event driven your application is. Performance should not matter if that number is small. But lets say you have 1000 click events on the elements inside the container.
Would you create a click for all the common elements with the same functionality. In such cases you could use delegation, wherein the event will be attached to a single element, which can lead to less maintainable code and more readability.