O que é a delegação de eventos DOM?

A delegação de eventos DOM é um mecanismo de resposta a eventos ui através de um único pai comum em vez de cada criança, através da magia do evento "borbulhando" (também conhecida como propagação de eventos).

Quando um evento é despoletado num elemento, ocorre o seguinte:

O evento é enviado para o seu alvo EventTarget e qualquer ouvinte de eventos foram encontrados disparos. borbulhando os eventos desencadearão então qualquer outros ouvintes de eventos encontrados por após o pai do EventTarget chain upward , checando para qualquer evento ouvintes registados em cada um objectivo de Evento sucessivo. Para cima a propagação continuará até incluindo o Document.

A borbulhagem de Eventos fornece a base para a delegação de eventos em navegadores. Agora você pode ligar um manipulador de eventos a um único elemento pai, e esse manipulador será executado sempre que o evento ocorrer em qualquer um dos seus nós filhos (e qualquer um dos seus filhos em ligar). Fala a delegação de eventos.Eis um exemplo disso na prática:

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

Com este exemplo se você clicar em qualquer um dos nós de crianças <li>, você veria um alerta de "click!", mesmo que não haja um manipulador de clique ligado ao <li> em que você clicou. Se nos ligássemos a cada <li> terias o mesmo efeito.

Então, qual é o benefício?

Imagine que agora tem a necessidade de adicionar dinamicamente novos <li> itens à lista acima via DOM manipulação:

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

Sem usar a delegação de eventos, teria de" redireccionar " o "onclick" manipulador de eventos para o novo elemento <li>, para que ele agisse da mesma forma que os seus irmãos. Com a delegação de eventos, não precisas de fazer nada. Basta adicionar o novo <li> à lista e está feito.

Isto é absolutamente fantástico para aplicações web com gestores de eventos ligados a muitos elementos, onde novos elementos são criados dinamicamente e / ou removidos no DOM. Com delegação de eventos o número de ataduras de eventos Pode ser drasticamente reduzido, movendo-os para um elemento pai comum, e o código que dinamicamente cria novos elementos na mosca pode ser dissociado da lógica de vincular seus manipuladores de eventos. Outro benefício para a delegação de Eventos é que a pegada total de memória usada pelos ouvintes de eventos diminui (uma vez que o número de ataduras de eventos diminui). Pode não fazer grande diferença para pequenas páginas que descarregam frequentemente (ou seja, navegar pelo utilizador a diferentes páginas frequentemente). Mas para aplicações de longa duração pode ser significativo. Há algumas situações realmente difíceis de rastrear quando elementos removidos do DOM ainda reivindicam a memória (ou seja, eles vazam), e muitas vezes essa memória vazada é amarrada a uma ligação de Evento. Com a delegação de Eventos você está livre para destruir elementos filhos sem o risco de esquecer de "desind" seus ouvintes de eventos (uma vez que o ouvinte está no ancestral). Estes tipos de vazamentos de memória podem então ser contidos (se não eliminado, o que é muito difícil de fazer às vezes. IE i'm looking at you). Aqui estão alguns exemplos de código mais concretos da delegação de eventos:

• Como Funciona A Delegação De Eventos JavaScript
• delegação de eventos versus tratamento de eventos
• JQuery.o delegado é a delegação de eventos + especificação do selector
• JQuery.em usa a delegação de eventos quando aprovado num selector como o segundo parâmetro
• Evento delegação sem biblioteca de JavaScript
• Encerramentos vs delegação de eventos : dá uma vista de olhos nos prós de não converter o código para usar a delegação de eventos
• abordagem interessante que a PPK descobriu para delegar os eventos focus e blur (que não não bolha)

A delegação de Eventos permite-lhe evitar adicionar ouvintes de eventos a nós específicos; em vez disso, o ouvinte de Eventos é adicionado a um dos pais. Esse ouvinte de eventos analisa eventos borbulhados para encontrar uma correspondência com elementos filhos.

Exemplo De JavaScript: Digamos que temos um elemento ul pai com vários elementos filhos:

<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 também que algo tem de acontecer quando cada elemento infantil é clicado. Poderá adicionar um ouvinte de eventos separado a cada elemento LI individual, mas e se os elementos LI são frequentemente adicionados e removidos da lista? Adicionar e remover ouvintes de eventos seria um pesadelo, especialmente se o código de adição e remoção está em diferentes lugares dentro do seu aplicativo. A melhor solução é adicionar um ouvinte de eventos ao elemento ul pai. Mas se você adicionar o ouvinte de eventos para o pai, como você vai saber que elemento foi clicado?

Simples: quando o evento sobe para o elemento UL, você verifica o evento a propriedade alvo do objeto para ganhar uma referência ao nó real clicado. Aqui está um excerto de JavaScript muito básico que ilustra a delegação 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!");
       }
 });

Comece por adicionar um ouvinte de eventos ao elemento-mãe. Quando o ouvinte de Eventos é despoletado, verifique o elemento de evento para garantir que é o tipo de elemento para reagir. Se é um elemento LI, boom: temos o que precisamos! Se não é um elemento que queremos, o evento pode ser ignorado. Este exemplo é bastante simples -- UL e LI é uma comparação direta. Vamos tentar algo mais difícil. Vamos ter um DIV pai com muitos filhos, mas tudo o que nos importa é uma etiqueta A com a classe css classe:

  // 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

A delegação de eventos Dom {[3] } é algo diferente da definição de ciência da computação.

Refere-se ao tratamento de eventos borbulhantes a partir de muitos elementos, como as células da tabela, de um objecto pai, como a tabela. Ele pode manter o código mais simples, especialmente ao adicionar ou remover elementos, e salva alguma memória.

Delegação é uma técnica em que um objeto expressa um certo comportamento para o exterior, mas na realidade delega a responsabilidade de implementar esse comportamento para um objeto associado. Isto soa inicialmente muito semelhante ao padrão proxy, mas serve um propósito muito diferente. Delegação é um mecanismo de abstração que centraliza o comportamento do objeto (método).

Geralmente falado: use a delegação como alternativa à herança. Herança é uma boa estratégia, quando um a relação estreita existe entre o pai e o filho objeto, no entanto, casais de herança objetos muito próximos. Muitas vezes, a delegação é a forma mais flexível de expressar uma relação entre classes.

Este padrão também é conhecido como"cadeias proxy". Vários outros padrões de design usam delegação - o estado, estratégia e padrões de visitantes dependem disso.

O conceito de delegação

Se há muitos elementos dentro de um dos pais, e você quer lidar com os eventos sobre eles - não ligue os manipuladores a cada elemento. Em vez disso, amarre o tratador único a seu pai, e obter a criança do evento.destino. Este site fornece informações úteis sobre como implementar delegação de eventos. http://javascript.info/tutorial/event-delegation

Um delegado em C# é semelhante a um ponteiro de função em C ou C++. Usando um delegado permite que o programador encapsule uma referência a um método dentro de um objeto delegado. O objeto delegado pode então ser passado para o código que pode chamar o método referenciado, sem ter que saber em tempo de compilação que método será invocado.

Ver esta ligação --> http://www.akadia.com/services/dotnet_delegates_and_events.html

É basicamente como a associação é feita ao elemento. .carregue em Aplicar ao DOM actual, enquanto .on (usando delegação) continuará a ser válido para novos elementos adicionados ao DOM after event association. O que é melhor de usar, diria que depende do caso.

Exemplo:

<ul id="todo">
   <li>Do 1</li>
   <li>Do 2</li>
   <li>Do 3</li>
   <li>Do 4</li>
</ul>

.Carregue Em Evento:

$("li").click(function () {
   $(this).remove ();
});

Evento .on:

$("#todo").on("click", "li", function () {
   $(this).remove();
});

Note que separei o selector .no. Eu explico porquê. Vamos supor que depois disto associação, façamos o seguinte:

$("#todo").append("<li>Do 5</li>");

É aí que vais notar a diferença.

Se o evento foi associado via .clique, a tarefa 5 não obedecerá ao evento clique, e assim não será removido.

Se foi associado via .em frente, com o selector separado, ele obedecerá.