Considere este ejemplo:
Está creando un sitio web que utiliza la representación del lado del cliente. Cuando el usuario hace clic en un enlace, desea desactivar la navegación del navegador y mostrar la nueva página usted mismo.

Tal vez también tenga algo de html como este, y quiera llamar a upvote_post(id) cada vez que se haga clic en el botón:

 <post-element data-id=12345> ... <upvote-button></upvote-button> </post-element>

La forma común de manejar estos dos casos sería agregar un controlador de eventos de click en cada elemento <a> , <upvote-button> , etc. que genere.

Pero, ¿no sería mejor simplemente agregar un controlador de eventos en el documento mismo?

 document.addEventListener('click', function(e) { for (let elem of e.path) { if (elem instanceof HTMLAnchorElement && elem.origin==window.location.origin) { e.preventDefault() render_page(elem.href) break } else if (elem.tagName=='UPVOTE-BUTTON') { let post = elem.closest('post-element') upvote_post(post.dataset.id) break } } })

Por supuesto, se siente mal pasar por alto el sistema de manejo de eventos incorporado, pero no puedo pensar en ninguna desventaja aquí.
Todavía puede agregar controladores de eventos a elementos específicos si lo necesita, pero para acciones comunes, esta parece una mejor solución.