That’s a nice example, @stobot. 
The key point is that $eventcatcher provides a single point of capture for click events. All clicks coming from any list item inside your list is handled by ONE click handler in ONE place. In JavaScript parlance, this is known as a “delegate”.
When you have $link, $button, <a href="x"> etc, included in a $list (and in your case the loop iterates many times), you may have hundreds (perhaps even thousands) of click event handlers. The TW core (and indeed the browser) needs to spend considerable periods of time “wiring up” and rendering all those click handlers. Repeat: with $eventcatcher, you only have ONE click handler, a single delegate.
More info: