event.target javascript

[Manoel Barros 1]

Ola pessoal, beleza

Para que ser o event.target no javascript, eu dei uma olha na documentação w3shools , e lá fala que ele retorna o elemento que o disparou, mas já existe o this para que faça isso, então em qual momento eu uso esse event.target no javascript?

[William Bruno 1501]

Quando vc estiver fazendo um delegate por exemplo.

[Manoel Barros 1]

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

[William Bruno 1501]

isso abaixo é um delegate:

 

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

estou escutando o click em #menu, e não em li

 

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

[Manoel Barros 1]

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

[William Bruno 1501]

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

[Ted k' 126]

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!