¿Ejemplos de usos comunes y prácticos de eventos de burbujeo y captura?

Question

¿Alguien puede proporcionar ejemplos prácticos y cotidianos de borrado de eventos y captura de eventos en jQuery/javascript? Veo todo tipo de ejemplos que demuestran estos conceptos, pero siempre parecen cosas que nunca necesitarías en una aplicación web normal.

Tanto las descripciones como los fragmentos de código serían muy apreciados.

Answer 1

¿Evento práctico burbujeo?

Con jQuery o sin él (teniendo en cuenta que puede manejar eventos borrosos sin utilizar una biblioteca) existen varios escenarios en los que le gustaría estructurar su código para aprovechar el burbujeo.

Un ejemplo: digamos que tiene una página donde los elementos se crean dinámicamente, pero desea procesar un clic en esos elementos. No se puede vincular un controlador de eventos directamente a ellos antes de que existan, pero vincular a los controladores individuales cuando se crean es un poco molesto. En su lugar, vincula un manejador de eventos a un objeto contenedor: los eventos de clic aparecerán desde los elementos individuales hasta el contenedor, pero aún puedes decir en qué elemento se hizo clic: jQuery lo hace fácil si estás usando la sintaxis apropiada de .on(), o .delegate() (o incluso .live() si tiene una versión realmente antigua de jQuery) porque establece this en el elemento cliqueado.

<div id="someContainer"></div> 

$("#someContainer").on("click", ".dynamicElement", function() { 
    // this is the element, do something with it 
}); 

Esto dice que el clic de un elemento con la clase "dynamicElement" que es un hijo de la "someContainer" div hacer algo. Funcionará independientemente de si el elemento "dynamicElement" existía en la carga de la página, se agregó más tarde en respuesta a alguna otra acción del usuario o tal vez se cargó con Ajax.

Answer 2

Agrego imágenes dinámicamente a un div, planeo usar el evento de burbujeo para capturar eventos de carga en el div que contiene.