3

Hoje surgiu uma dúvida, apesar que com os testes que fiz consegui resolver várias delas.

Mas assim, quando devo usar e.target e quando devo usar This . Pois ontem quando descobri o e.target, passei a usá-lo. Mas a desvantagem, é que este eu preciso de verificar onde estou clicando para fazer o determinado evento. Mas percebi que ele é bem útil quando utilizo o evento em $(document).

Outra desvantagem do this, é que devo apontar para o elemento ( digamos que tenho divs com as mesmas classes como filho), tenho que determinar se é a primeira, segunda etc, Eu pelo menos não consegui pegar um filho de THIS que foi clicado, ou um elemento PAI, sem apontar qual era. Tive que dar um find para especificar qual eu desejava.

Isso são minhas persepções. Gostaria de saber de vocês, quando devo usar cada uma.

http://jsfiddle.net/W4Km8/4919/

1

1 Resposta 1

4

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar button
    console.log('button e.target', e.target); // vai dar button
});

jsFiddle: http://jsfiddle.net/2fqp1se6/2/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Repara ainda que o eventhandler de btn dispara primeiro!.

Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .