25

Bom, surgiu uma dúvida enquanto eu estava mexendo com jQuery e o código funcionou perfeitamente no Chrome usando o evento $(event.target), já no Firefox só funcionou com $(this), então surgiu essa dúvida. Qual a principal diferença entre eles?

$(document).on('click', '.bermuda', function(e){
    $(e.target).fadeOut(300);
});

$(document).on('click', '.bermuda', function(){
    $(this).fadeOut(300);    
});

2 Respostas 2

16

O $(this) se trata exatamente do elemento atual, onde se definiu o evento.

Já o $(event.target) pode se tratar tanto do elemento onde o evento está atribuído como do filho desse elemento atual, onde se definiu o evento.

Exemplo JQuery:

$(document).click(function(e){
    console.log(e.target); // #teste
    console.log(this); // #document
});

Exemplo HTML:

<body>
   <div id="teste">aqui será clicado</div>
</body>

No seu caso, se .bermuda tiver algum elemento filho, como um <p> ou um <img/>, ao clicar sobre eles, o evento de .bermuda será acessado, porém event.target retornará o elemento clicado, e não .bermuda.

É por isso que em alguns caso se usa event.stopPropagation(), para pode evitar essa propagação do evento dos elementos filhos para os pais.

1
  • 1
    Obrigado, resposta bastante esclarecedora... Commented 19/02/2015 às 11:45
9

O this se refere ao elemento ao qual foi anexado o evento. Já o event.target se refere ao elemento que disparou o evento.

Por exemplo, suponha que você esteja manipulando uma tabela e queira pegar o evento click em uma td.

<table>
    <tr>
        <td id="teste">
            <img src="testando.png" />
        </td>
    </tr>
</table>

$("#teste").on("click", function(event) {
    console.log(this);
    console.log(event.target);
});

Neste exemplo, se o usuário clicar na imagem, o event.target se refere a imagem e o this se refere a td#teste.

1
  • Obrigado, resposta bastante esclarecedora... Commented 19/02/2015 às 11:45

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 .