O que é a delegação de eventos DOM?
alguém pode explicar a delegação de eventos em JavaScript e como é que ela é útil?
7 answers
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 doEventTarget
chain upward , checando para qualquer evento ouvintes registados em cada um objectivo de Evento sucessivo. Para cima a propagação continuará até incluindo oDocument
.
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.
- 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
eblur
(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....
}
}
}
}
});
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
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á.