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
});
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
});
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.