¿Qué es la delegación de eventos en javascript y cuáles son sus principios?

Para comprender el principio de delegación, primero es necesario comprender el proceso de los eventos DOM.

Los eventos DOM se dividen en dos etapas, como se muestra en la figura:

Etapa de captura de eventos (secuencia de flecha roja)

Etapa de difusión de eventos (secuencia de flecha verde) ) )

En la fase de captura de eventos, el origen del evento se propaga desde defaultView (que puede entenderse como la página completa) hasta el destino específico (objetivo). De lo amplio a lo específico.

Durante la fase de propagación del evento, el origen del evento se propaga desde el destino a la vista predeterminada en secuencia. De específico a amplio, el alcance se vuelve cada vez más grande, al igual que el proceso de burbujeo, las burbujas se hacen cada vez más grandes (el alcance se hace cada vez más grande)

Y la delegación de eventos se utiliza para la fase de captura de eventos de Eventos DOM. Delegue eventos que ocurren en un DOM específico al DOM más grande. Esto es como un mensajero. Sería muy aburrido si tuviera que entregar cartas a todas las casas cada vez. Pero si se confía a un administrador de mayor escala, como la sala de comunicaciones de la comunidad, entonces las cosas serán muy simples. La delegación de eventos es similar a este principio. Hay muchos botones en mi página. Si no uso la delegación de eventos, solo puedo registrar eventos en cada botón. Esto es muy problemático. Pero si registro el evento en un div de gran alcance (asumiendo que todos los botones están dentro de este div), entonces solo necesito registrar el evento una vez y luego puedo manejar las respuestas de todos los botones al evento (siempre que los botones estén todo contenido dentro de dicho div medio).