lanzar - eventos personalizados javascript

¿Qué es la delegación de eventos DOM?

Question

¿Alguien puede explicar la delegación de eventos en JavaScript y cómo es útil?

Answer 1

El concepto de delegación

Si hay muchos elementos dentro de uno de los padres, y desea manejar los eventos en ellos de ellos, no vincule los manejadores a cada elemento. En su lugar, vincule el controlador único a su padre y obtenga el hijo de event.target. Este sitio proporciona información útil sobre cómo implementar la delegación de eventos. http://javascript.info/tutorial/event-delegation

Answer 2

La delegación de eventos DOM es un mecanismo de respuesta a ui-events a través de un único padre común en lugar de cada niño, a través de la magia del evento "burbujeo" (también conocido como propagación de eventos).

Cuando se desencadena un evento en un elemento, ocurre lo siguiente :

El evento se envía a su EventTarget destino y cualquier detector de eventos encontrado allí se activa. Los eventos de burbujeo activarán los detectores de eventos adicionales que se encuentren al seguir hacia arriba la cadena principal de EventTarget , verificando si hay detectores de eventos registrados en cada EventTarget sucesivo. Esta propagación hacia arriba continuará hasta e incluyendo el Document .

El borrado de eventos proporciona la base para la delegación de eventos en los navegadores. Ahora puede vincular un controlador de eventos a un elemento padre único, y ese controlador se ejecutará siempre que el evento ocurra en cualquiera de sus nodos secundarios (y cualquiera de sus hijos por turno). Esta es una delegación de eventos. Aquí hay un ejemplo de esto en la práctica:

<ul onclick="alert(event.type + ''!'')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Con ese ejemplo, si hace clic en cualquiera de los nodos <li> secundarios, verá una alerta de "click!" , aunque no hay ningún controlador de clic vinculado al <li> que hizo clic. Si onclick="..." a cada <li> obtendría el mismo efecto.

Entonces, ¿cuál es el beneficio?

Imagine que ahora tiene la necesidad de agregar dinámicamente nuevos elementos <li> a la lista anterior mediante la manipulación de DOM:

var newLi = document.createElement(''li'');
newLi.innerHTML = ''Four'';
myUL.appendChild(newLi);

Sin usar la delegación de eventos, tendría que "volver a vincular" el controlador de eventos "onclick" con el nuevo elemento <li> , para que actúe de la misma manera que sus hermanos. Con la delegación de eventos no necesita hacer nada. Simplemente agregue el nuevo <li> a la lista y listo.

Esto es absolutamente fantástico para las aplicaciones web con controladores de eventos vinculados a muchos elementos, donde los nuevos elementos se crean y / o eliminan dinámicamente en el DOM. Con la delegación de eventos, el número de enlaces de eventos puede reducirse drásticamente al moverlos a un elemento principal común, y el código que crea dinámicamente nuevos elementos sobre la marcha se puede desacoplar de la lógica de vincular sus manejadores de eventos.

Otro beneficio de la delegación de eventos es que la huella de memoria total utilizada por los detectores de eventos disminuye (ya que el número de enlaces de eventos disminuye). Puede que no tenga mucha importancia para las páginas pequeñas que se descargan con frecuencia (es decir, que el usuario navegue a diferentes páginas a menudo). Pero para aplicaciones de larga duración puede ser significativo. Hay algunas situaciones realmente difíciles de localizar cuando los elementos eliminados del DOM siguen reclamando memoria (es decir, tienen fugas) y, a menudo, esta memoria filtrada está vinculada a un enlace de evento. Con la delegación de eventos, puedes destruir elementos secundarios sin riesgo de olvidarte de "desvincular" a sus oyentes de eventos (ya que el oyente está en el ancestro). Estos tipos de pérdidas de memoria pueden contenerse (si no se eliminan, lo que a veces es muy difícil de hacer. IE, te estoy mirando).

Aquí hay algunos ejemplos de código concretos mejores de la delegación de eventos:

• Cómo funciona la delegación de eventos de JavaScript
• Delegación de evento versus manejo de evento
• jQuery.delegate es una delegación de eventos + especificación de selector
• jQuery.on usa la delegación de eventos cuando pasa un selector como el 2 ° parámetro
• Delegación de eventos sin una biblioteca de JavaScript
• Delegación de cierres vs eventos : echa un vistazo a las ventajas de no convertir el código para usar la delegación de eventos
• Interesante enfoque que PPK descubrió para delegar el focus y blur eventos (que no burbujean)

Answer 3

La delegación de eventos le permite evitar agregar oyentes de eventos a nodos específicos; en cambio, el detector de eventos se agrega a uno de los padres. Ese oyente de eventos analiza los eventos burbujeantes para encontrar una coincidencia en elementos secundarios.

Ejemplo de JavaScript:

Digamos que tenemos un elemento UL padre con varios elementos secundarios:

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>

Digamos también que algo debe suceder cuando se hace clic en cada elemento secundario. Podría agregar un detector de eventos por separado para cada elemento LI individual, pero ¿qué sucede si los elementos LI se agregan y eliminan con frecuencia de la lista? Agregar y eliminar detectores de eventos sería una pesadilla, especialmente si el código de adición y eliminación se encuentra en diferentes lugares dentro de su aplicación. La mejor solución es agregar un detector de eventos al elemento UL padre. Pero si agrega el detector de eventos al padre, ¿cómo sabrá en qué elemento se hizo clic?

Simple: cuando el evento burbujea hasta el elemento UL, usted verifica la propiedad de destino del objeto de evento para obtener una referencia al nodo en el que se hizo clic. Aquí hay un fragmento de JavaScript muy básico que ilustra la delegación de eventos:

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

Comience por agregar un detector de eventos de clic al elemento principal. Cuando se activa el detector de eventos, verifique el elemento del evento para asegurarse de que sea el tipo de elemento al que reaccionar. Si es un elemento LI, boom: ¡tenemos lo que necesitamos! Si no es un elemento que queremos, el evento puede ser ignorado. Este ejemplo es bastante simple: UL y LI son una comparación directa. Probemos algo más difícil. Tengamos un DIV para padres con muchos hijos, pero lo único que nos importa es una etiqueta A con la clase classA CSS:

  // Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    // Get the CSS classes
    var classes = e.target.className.split(" ");
    // Search for the CSS class!
    if(classes) {
        // For every CSS class the element has...
        for(var x = 0; x < classes.length; x++) {
            // If it has the CSS class we want...
            if(classes[x] == "classA") {
                // Bingo!
                console.log("Anchor element clicked!");
                // Now do something here....
            }
        }
    }

  }
});

http://davidwalsh.name/event-delegate

Answer 4

Un delegado en C # es similar a un puntero de función en C o C ++. El uso de un delegado le permite al programador encapsular una referencia a un método dentro de un objeto delegado. El objeto delegado se puede pasar al código que puede llamar al método al que se hace referencia, sin tener que saber en tiempo de compilación qué método se invocará.

Vea este enlace -> http://www.akadia.com/services/dotnet_delegates_and_events.html

Answer 5

Delegation es una técnica donde un objeto expresa cierto comportamiento al exterior, pero en realidad delega la responsabilidad de implementar ese comportamiento en un objeto asociado. Esto suena al principio muy similar al patrón proxy, pero sirve para un propósito muy diferente. La delegación es un mecanismo de abstracción que centraliza el comportamiento del objeto (método).

Generalmente hablado: use la delegación como alternativa a la herencia. La herencia es una buena estrategia, cuando existe una relación estrecha entre el objeto primario y secundario, sin embargo, la herencia une los objetos muy de cerca. A menudo, la delegación es la forma más flexible de expresar una relación entre clases.

Este patrón también se conoce como "cadenas proxy". Varios otros patrones de diseño usan la delegación: el estado, la estrategia y los patrones de visitantes dependen de ello.

Answer 6

la delegación del evento dom es algo diferente de la definición de informática.

Se refiere al manejo de eventos de burbujeo de muchos elementos, como celdas de tabla, de un objeto principal, como la tabla. Puede mantener el código más simple, especialmente al agregar o eliminar elementos, y guarda algo de memoria.