event.target javascript

Quando vc estiver fazendo um delegate por exemplo.

Ola william, poderia dá um exemplo explicando como seria usando com delegate?

isso abaixo é um delegate:

document.getElementById("menu").addEventListener("click", function(event){
 if (event.target.tagName === "LI") {
 //..do something
 }
});

<ul id="menu">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>quando na verdade, o meu interesse é saber se a LI foi clicada.Esta é uma técnica de otimização de eventos, e para fazer bind de elementos criados dinamicamente, como aqueles que são inseridos por ajax, por exemplo.

Hum .. então a diferença de this e event.target é que usando o event.target todos os elementos dentro de #menu sempre serão escutados quando for clicado(mesmo se esse elemento foi adicionado via ajax). E usando this isso não aconteceria

fiz um teste aqui é realmente foi o que você tinha dito

// usando o "event.target" para recuperar o elemento clicado

document.getElementById("menu").addEventListener("click", function(event) {
 console.log(event.target.tagName); // vai retorna: li
});

// usando o "this" para recupera o elemento clicado

document.getElementById("menu").addEventListener("click", function(event) {
 console.log(this.tagName); // vai retorna: ul#menu
});

vlw pela ajuda ae william

Hum.. vc entendeu, mas falou de uma forma incorreta.

event.target mostra o elemento que foi realmente o alvo do evento.

Isso é possível por causa do comportamento conhecido como Event Bubble

event.target mostra o elemento que foi realmente o alvo do evento. 

Se todo mundo explicasse assim nos blogs e fóruns, não teríamos problemas de entendimento. Resumiu tudo ai mestre Bruno!